javascript - 分隔线颜色变化 React Material Ui

Question

我正在使用 Material 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

使用 classes API 更改 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 Theme