MaterialUI分隔线颜色与厚度无法修改问题求助

针对你遇到的无法修改Divider厚度和颜色的问题，给你两种直接可行的方案：

方案1：使用sx属性直接定制（推荐新手） #

如果是普通无文本的Divider，直接通过sx设置边框属性即可：

import Divider from '@mui/material/Divider';

<Divider
  sx={{
    borderColor: '#2196f3', // 自定义分隔线颜色
    borderWidth: '2px',      // 自定义分隔线厚度
  }}
/>

如果是带文本的Divider，默认的分隔线是通过::before和::after伪元素实现的，需要单独设置这两个伪元素的样式：

<Divider
  sx={{
    '&::before, &::after': {
      borderColor: '#f44336', // 分隔线颜色
      borderWidth: '3px',      // 分隔线厚度
    },
    color: '#666', // 文本颜色（你之前已经会改的部分）
    fontWeight: 'bold', // 可选：文本加粗
  }}
>
  自定义文本
</Divider>

方案2：创建自定义Styled组件 #

如果需要在多个地方复用这个样式，可以用styled工具封装：

import { styled } from '@mui/material/styles';
import Divider from '@mui/material/Divider';

const CustomDivider = styled(Divider)(({ theme }) => ({
  borderColor: '#4caf50',
  borderWidth: '2px',
  '&::before, &::after': {
    borderColor: '#4caf50',
    borderWidth: '2px',
  },
}));

// 使用时直接调用：
<CustomDivider>复用样式的分隔线</CustomDivider>

注意点 #

• MaterialUI的Divider默认使用border-top（水平分隔线），所以设置borderWidth和borderColor会直接生效；带文本的Divider则依赖伪元素生成左右两条线，必须选中&::before, &::after才能修改。
• 如果你的样式还是不生效，检查是否有其他全局样式或者更高优先级的样式覆盖了当前设置，可以用浏览器开发者工具查看元素的样式优先级，调整sx里的属性或者添加!important（不推荐，除非必要）。

内容的提问来源于stack exchange，提问作者Somdotta Sarkar