MUI 隔板厚度

【问题标题】：MUI Divider ThicknessMUI 隔板厚度
【发布时间】：2021-12-09 10:17:15
【问题描述】：

我正在寻找增加 MUI Divider 线条粗细的解决方案（垂直拉伸水平线，或水平拉伸垂直线）。

我在https://mui.com/api/divider/ 阅读了 MUI v5 的文档。

根据API，没有修改分隔线“厚度”的属性。

我尝试了不同的内联样式实现（特定于 MUIv5）：

<Divider sx={{height:"15px", fontSize:"50px", width:"50px", fontWeight:"bold", padding:"15px"}}/>

上述属性均未修改线条的“粗细”。

我正在寻找特定于 MUI v5 Divider 组件的解决方案。我不想创建一个 Box 组件，然后为该 Box 组件实现内联 sx 属性或自定义类。

有人有什么想法吗？

【问题讨论】：

标签： css material-ui attributes styling divider

【解决方案1】：

您可以更改CSS属性border-bottom-width来修改Divider的粗细：

<Divider sx={{ borderBottomWidth: 5 }} />

对于垂直Divider：

<Divider orientation="vertical" flexItem sx={{ borderRightWidth: 5 }} />

styled() 也可用于创建支持自定义厚度的Divider 的增强版本：

const MyDivider = styled(Divider)(({ thiccness, orientation }) => ({
  ...(thiccness !== undefined &&
    (orientation === "vertical"
      ? { borderRightWidth: thiccness }
      : { borderBottomWidth: thiccness }))
}));

<MyDivider thiccness={10} />

<MyDivider orientation="vertical" flexItem thiccness={10} />

【讨论】：