无法使用 material-ui 中的类覆盖样式答案

【问题标题】：Failed to override styles with classes in material-ui无法使用 material-ui 中的类覆盖样式
【发布时间】：2020-09-17 17:08:50
【问题描述】：

我正在使用 material-ui 中的TableRow 组件实现一个表，该表具有一个名为“selected”的属性。只要“selected”为真，就会应用粉红色背景颜色（来自默认主题）。我试图改变这个默认的粉红色，根据文档，我选择override the css classes 喜欢：

const styles = theme => ({
  rowSelected: {
    backgroundColor: theme.palette.grey[700]
  }
})
class CustomTableRow extends React.Component {
// basic component logic
render() {
const {classes, className, style } = this.props;
  <TableRow
    key={key}
    component="div"
    selected={true}
    hover={true}
    className={className}
    classes={{ selected: classes.rowSelected}}
    style={style}
  >
      // some children
  </TableRow>
}
export default withStyles(styles, { withTheme: true })(CustomTableRow);

但这不起作用，这非常令人困惑。因为我已经成功地在其他地方使用上述相同的方法为Drawer 组件做了同样的事情。

我使用 Chrome 开发工具调试了每个 css 属性。我现在最怀疑的是，这个组件上的粉红色是这样应用的：

.MuiTableRow-root.Mui-selected, .MuiTableRow-root.Mui-selected:hover {
    background-color: rgba(245, 0, 87, 0.16);

而且我的自定义类样式的优先级低于这个是灰色的。

更新1：

我的项目太大，我不知道如何为codeandbox.io 简化它。也许我们可以直接查看material-ui源代码，TableRow Source Code。我正在做的是覆盖root中的这个css声明

    '&$selected, &$selected:hover': {
      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.selectedOpacity),
    },

通过在下面传递另一个selected 声明。我意识到这是因为这个&$selected, &$selected:hover通常不是css，即使我将它复制到rowSelected，它也不起作用。

更新2：

我设法用 '!important' 关键字覆盖了该背景颜色：

const styles = theme => ({
  rowSelected: {
    backgroundColor: theme.palette.grey[700] + " !important",
  }
})

我不知道这是否是一种理想的解决方案。这清楚地表明问题在于 css 类的优先级。那么如何用 selected 类覆盖 root 类中已经定义的 backgroundColor。

请帮忙，谢谢。

【问题讨论】：

如果你有fiddle或者jsbin链接来修改例子会更好

标签： css reactjs material-ui

【解决方案1】：

要为所选类提供特定性，您可以将 $selected 和 $selected:hover 类应用于您的覆盖，如下所示

const styles = theme => ({
  rowSelected: {
    "&$selected, &$selected:hover": {
      backgroundColor: theme.palette.grey[800]
    }
  }
})

Sample demo

【讨论】：