分隔线颜色变化 React Material Ui

Posted 2023-02-22

【中文标题】分隔线颜色变化 React Material Ui

【英文标题】：Divider color change React Material Ui

【发布时间】：2020-02-06 07:08:01

【问题描述】：

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

我查阅了相关文档，但不知道我做错了什么。有人可以帮帮我吗？

【问题讨论】：

我相信唯一的问题是您需要className 而不是classname（大写N）。事实上，控制台中应该有关于它的警告。

【参考方案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

【参考方案2】：

您必须使用类覆盖 CSS。

<Divider classes=root: classes.dividerColor />

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

【参考方案3】：

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

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

【参考方案4】：

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

【讨论】：

简单...优雅

【参考方案5】：

类名示例：

const useStyles = makeStyles((theme) => (
  divider: 
      background: "white",
  ,
));


<Divider className=classes.divider />

【参考方案6】：

在最新的 MUI(v5) 中，是这样完成的：

            <Divider
              sx= bgcolor: (theme) => theme.palette.divider 
              style=
                border: "none",
                height: 2,
                margin: 0,
              
            />

【参考方案7】：

使用@mui v5，我认识到这是让它为自己工作的唯一方法。

注意： 因为我的 Divider 项目有文本， ::before 和 ::after css 选择器指定要设置文本的哪一侧。

<Divider
    sx=
        '&.MuiDivider-root': 
            '&::before': 
                borderTop: `thin solid $theme?.palette.primary['700']`
             
        
    
    style=
        color: "white",
    
    variant="middle"
> Editing as - username </Divider>