如何覆盖 Material-UI MenuItem 选择的背景颜色？

Posted 2023-02-22

【中文标题】如何覆盖 Material-UI MenuItem 选择的背景颜色？

【英文标题】：How to override Material-UI MenuItem selected background color?

【发布时间】：2018-10-26 12:48:34

【问题描述】：

目前我正在努力将MenuItem 组件的背景颜色设置为不同的颜色。 （无需使用 !important 强制它）

组件代码：

<MenuItem
 classes=
  root: this.props.classes.root,
  selected: this.props.classes.selected
 
 value=10>
  Alfabetical
</MenuItem>

这是css：

const homePageStyle = (theme) => (
  root: 
    width: "300px"
  ,
  selected: 
    backgroundColor: "turquoise !important",
    color: "white",
    fontWeight: 600
  
);

我想达到什么目标？

我想设置 MenuItem 的 backgroundColor 而不必设置 !important 标志。我已经用很多组件做到了这一点，但目前这似乎无法解决。

我正在使用版本“@material-ui/core”：“^1.0.0-rc.0”，

【问题讨论】：

你用的是什么版本的material-ui？

@ArnaudChrist 我正在使用“@material-ui/core”：“^1.0.0-rc.0”，

正确答案是这里的第一个答案：***.com/questions/49439266/…

【参考方案1】：

在 MUI v5 中，您可以这样做：

<Select
  MenuProps=
    sx: 
      "&& .Mui-selected": 
        backgroundColor: "pink"
      
    
  
>

现场演示

【讨论】：

哥们，你真是个救命恩人！谢谢！正在寻找这个。 :)

【参考方案2】：

您可以将样式更新为：

const homePageStyle = (theme) => (
  root: 
    width: "300px"
  ,
  selected: 
    '&.Mui-selected': 
        backgroundColor: "turquoise",
        color: "white",
        fontWeight: 600
    
  
);

这是因为 material-ui 设置了这个组件的样式：.MuiListItem-root.Mui-selected 这两个类的特殊性优先于提供的覆盖。

【参考方案3】：

我这样做是为了改变选中的 MenuItem 背景。 （材质 UI 提供的选定道具）。

export default createMuiTheme(
  overrides: 
    MuiMenuItem:  // For ListItem, change this to MuiListItem
      root: 
        "&$selected":        // this is to refer to the prop provided by M-UI
          backgroundColor: "black", // updated backgroundColor
        ,
      ,
    ,
  ,
);

这些是可以被覆盖的默认值https://material-ui.com/customization/default-theme/#default-theme

参考：https://material-ui.com/customization/components/#global-theme-override

注意：我使用的是 Material-UI 版本 4.9.11

【参考方案4】：

我刚刚发了working example here

要考虑您选择的类，您必须将MenuItem 组件的selected 属性设置为true

<MenuItem
  onClick=this.handleClose
  selected
  classes= selected: classes.selected 
>

【讨论】：

这在你做这个例子之前就已经有效了。但问题是 !important 标志。我不喜欢用，有没有不用的替代方法？

您想更新您的演示以涵盖选择下划线颜色的变化吗？ material-ui-next.com/demos/selects/#selects

对不起，我快速输入代码并忘记了您的“！重要”问题。这似乎是一个错误，也许你可以在 GitHub 上打开一个关于它的问题。一种解决方法可能是根据所选状态在根 css 中应用适当的背景颜色，并且不使用所选 css。

谢谢！能否更新您的答案以适用于 Material-ui 的 TextFields。我怎样才能编辑 TextField 组件的下划线？

我非常有信心您可以通过覆盖您提供给应用程序的 material-ui 主题中的主要颜色属性来更改此颜色。