分隔线颜色变化 React Material Ui

Question

我正在使用材料 ui 框架的分隔器组件，并且坚持颜色变化方面。对于这个框架中的大多数其他组件，我已经能够通过应用 useStyles() 方法来更改颜色，如下所示：

const useStyles = makeStyles(theme => ({
    textPadding: {
      paddingTop: 10,
      paddingBottom: 10,
      color:'white',
    },
}));

但我无法使用相同的方法更改分隔线的颜色：

const useStyles = makeStyles(theme => ({
dividerColor: {
  backgroundColor: 'white',
},
}));

我当然然后将它应用于组件：

<Divider classname={classes.dividerColor}></Divider>

我查找了它的文档，但无法弄清楚我做错了什么。有人可以帮帮我吗？

Answer 1

要更改DividerMUI v5 中的线条颜色，您需要根据元素是否有子元素来调整方法。

对于空的Divider：

<Divider sx={{ bgcolor: "secondary.light" }} />

对于Divider有内容的：

<Divider
  sx={{
    "&::before, &::after": {
      borderColor: "secondary.light",
    },
  }}
>
  <Typography>Some Text</Typography>
</Divider>

与 v5 的其他答案相比，请注意，您不需要将 SX 属性嵌套在下面&.MuiDivider-root，并且可以将主题属性与 SX 简写字符串一起使用（例如，secondary.light而不是(theme) => theme.palette.secondary.light.

Answer 2

您可以使用
<Divider style={{ background: 'black' }} variant="middle" />

Answer 3

使用classesAPI 更改divider颜色：

const useStyles = makeStyles((theme) => ({
  divider: {
      // Theme Color, or use css color in quote
      background: theme.palette.divider,
  },
}));


<Divider classes={{root: classes.divider}} />

Divider API，了解Material UI 主题

Answer 4

您必须使用类覆盖 CSS。

<Divider classes={{root: classes.dividerColor}} />

请参阅有关 CSS 覆盖的 Material UI 文档：https : //material-ui.com/customization/components/#overriding-styles-with-classes

Answer 5

您应该始终使用classNamewhile 使用material-ui样式，而不是典型的 javascript 样式声明，例如classname.

您也可以参考官方文档：https ://material-ui.com/styles/basics/#hook-api