如何在Material UI中自定义水平虚线分割线？

当前效果：实线样式的水平分割线
目标效果：虚线样式的水平分割线

你之前设置borderRadius没效果是因为这个属性负责的是圆角，和虚线样式无关。MUI的Divider默认使用solid类型边框，要改成虚线需要调整边框样式属性。下面是具体解决方案：

方案1：直接修改现有组件样式 #

针对代码里两种分割线场景（独立Divider、带divider属性的ListItem），分别覆盖样式：

import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";

const style = {
  width: "100%",
  maxWidth: 360,
  bgcolor: "background.paper"
};

export default function ListDividers() {
  return (
    <List sx={style} component="nav" aria-label="mailbox folders">
      <ListItem button>
        <ListItemText primary="Inbox" />
      </ListItem>
      {/* 修改独立Divider为虚线 */}
      <Divider sx={{ borderTopStyle: 'dashed', borderTopWidth: 1 }} />
      {/* 处理带divider属性的ListItem，覆盖内置分割线样式 */}
      <ListItem 
        button 
        divider
        sx={{ '& .MuiDivider-root': { borderTopStyle: 'dashed' } }}
      >
        <ListItemText primary="Drafts" />
      </ListItem>
      <ListItem button>
        <ListItemText primary="Trash" />
      </ListItem>
      {/* 另一个虚线Divider */}
      <Divider sx={{ borderTopStyle: 'dashed', borderTopWidth: 1 }} />
      <ListItem button>
        <ListItemText primary="Spam" />
      </ListItem>
    </List>
  );
}

方案2：全局统一修改Divider样式 #

如果希望项目中所有Divider默认都是虚线，可以通过MUI主题定制实现：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";

// 定制主题
const theme = createTheme({
  components: {
    MuiDivider: {
      styleOverrides: {
        root: {
          borderTopStyle: 'dashed',
        },
      },
    },
  },
});

const style = {
  width: "100%",
  maxWidth: 360,
  bgcolor: "background.paper"
};

export default function ListDividers() {
  return (
    <ThemeProvider theme={theme}>
      <List sx={style} component="nav" aria-label="mailbox folders">
        {/* 这里的Divider和带divider属性的ListItem都会自动应用虚线样式 */}
        <ListItem button>
          <ListItemText primary="Inbox" />
        </ListItem>
        <Divider />
        <ListItem button divider>
          <ListItemText primary="Drafts" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="Trash" />
        </ListItem>
        <Divider />
        <ListItem button>
          <ListItemText primary="Spam" />
        </ListItem>
      </List>
    </ThemeProvider>
  );
}

替代方案：自定义分割线组件 #

如果觉得MUI的Divider限制太多，也可以自己写一个极简的虚线分割线：

const CustomDashedDivider = () => (
  <div 
    style={{
      width: '100%',
      borderTop: '1px dashed rgba(0,0,0,0.12)',
      margin: '8px 0',
    }}
  />
);

// 使用时直接替换原Divider即可
<CustomDashedDivider />

内容的提问来源于stack exchange，提问作者Ralph Henry