分隔器颜色变化React材质Ui

1u4esq0p 于 2022-09-21 发布在 React

关注(0)|答案(5)|浏览(162)

我使用的是材质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>

我查了一下病历，但想不出我做错了什么。有谁能帮我一把吗？

reactjs

来源：https://stackoverflow.com/questions/58295779/divider-color-change-react-material-ui

5条答案

按热度按时间

vu8f3i0k1#

使用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

赞(0）回复(0）举报 2022-09-21

nimxete22#

要在MUIv5中更改Divider线颜色，您需要根据元素是否有子元素来调整方法。

对于空的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)。

赞(0）回复(0）举报 2022-09-21

owfi6suc3#

您必须使用类覆盖css。

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

请参阅关于css覆盖的材料UI文档：https://material-ui.com/customization/components/#overriding-styles-with-classes

赞(0）回复(0）举报 2022-09-21

jfewjypa4#

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

赞(0）回复(0）举报 2022-09-21

juud5qan5#

在使用material-ui样式时，您应该始终使用className，而不是像classname这样的典型的Java样式声明。

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

赞(0）回复(0）举报 2022-09-21

我来回答

分隔器颜色变化React材质Ui

5条答案

相关问题

热门标签

最新问答