MUI 分隔板厚度

Question

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

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

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

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

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

None 个提到的属性修改了线条的“粗细”。

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

有人有什么想法吗？

Answer 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} />

MUI 分隔板厚度

MUI Divider Thickness

css

material-ui

attributes

styling

divider