如何修改Material UI v5中Divider分割线的粗细？

解决方案 #

你之前设置的属性未生效是因为MUI v5的Divider组件的分割线是通过border样式实现的，你调整的height、width是容器占位尺寸，font相关属性只作用于内嵌文本，都不影响分割线本身的粗细，直接修改对应方向的border宽度即可，不需要额外套外层组件：

1. 水平分割线调粗

水平分割线默认用顶部border实现，修改borderTopWidth即可：

// 示例：水平分割线调整为3px粗
<Divider sx={{ borderTopWidth: 3 }} />

// 可同时调整颜色
<Divider sx={{ borderTopWidth: 4, borderColor: 'primary.main' }} />

2. 垂直分割线调粗

垂直分割线默认用左侧border实现，修改borderLeftWidth即可，注意垂直分割线需要额外指定高度：

// 示例：垂直分割线调整为3px粗，高度40px
<Divider 
  orientation="vertical" 
  sx={{ borderLeftWidth: 3, height: '40px' }} 
/>

如果你的Divider带有内嵌文本，上述配置同样生效，不会影响文字的排版展示。

内容的提问来源于stack exchange，提问作者G M