材料 UI 分隔板厚度

Question

我正在寻找一种增加材质 UIDivider线条粗细的解决方案（垂直拉伸水平线或水平拉伸垂直线）。

我已阅读https://mui.com/material-ui/api/divider/上的 Material UI v5 文档。

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

我尝试过内联样式的不同实现（特定于 Material UI v5）：

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

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

我正在寻找特定于 Material UI 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} />