如何在不使用!important的情况下覆盖Material-UI MenuItem选中背景色？

我完全懂你遇到的困扰——在Material-UI v1.0.0-rc.0版本里，直接给selected类设置背景色必须加!important才能生效，这种写法既不优雅也容易引发样式冲突。其实问题核心在于样式优先级：Material-UI内置的选中状态样式，比你单独定义的.selected类特异性更高，所以得调整自定义样式的写法来提升优先级。

正确的样式写法（无需!important） #

你可以利用JSS的嵌套选择器特性，把选中状态的样式嵌套在root类里，同时通过$selected引用选中类，让自定义选择器的特异性超过内置样式：

const homePageStyle = (theme) => ({
  root: {
    width: "300px",
    // 用&$selected组合根类与选中类，提升选择器优先级
    '&$selected': {
      backgroundColor: "turquoise",
      color: "white",
      fontWeight: 600
    }
  },
  // 必须保留空的selected类，因为要传递给MenuItem的classes属性，JSS会自动生成对应类名
  selected: {}
});

为什么这样能生效？ #

Material-UI内置的选中状态样式是.MuiMenuItem-selected这类单类选择器，而我们写的&$selected会被JSS编译成.你的root类名.你的selected类名——这种多类组合的选择器特异性更高，自然就能覆盖内置样式，完全不需要!important。

组件代码保持不变 #

你原来的MenuItem组件代码是正确的，继续按如下方式传递classes即可：

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

这种方式在Material-UI v1的早期版本里都能稳定生效，我之前处理同类问题时也常用这个方法，你可以试试～

内容的提问来源于stack exchange，提问作者KiwiCoder