嵌套类的MaterialUI主题样式

Question

我正在使用sinkWithoutHeader为应用创建主题。我使用的是材料表，我需要定位到当前已排序的列表标题的图标：

在开发人员工具中观看，它具有以下CSS选择器：

createMuiTheme

我该如何在.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon { color: rgba(0, 0, 0, 0.54); opacity: 1; } 对象中做到这一点？

createMuiTheme

Answer 1

当不确定如何覆盖默认样式时，最好的资源是查看如何定义默认样式。浏览器开发人员工具将向您显示最终结果，源代码将向您显示用于生成具有相似特异性的CSS的方法。

下面是TableSortLabel中用于控制图标颜色的相关代码：

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    '&$active': {
      // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
      '&& $icon': {
        opacity: 1,
        color: theme.palette.text.secondary,
      },
    },
  }
});

您可以使用非常相似的语法进行主题覆盖：

const theme = createMuiTheme({
  overrides: {
    MuiTableSortLabel: {
      root: {
        "&$active": {
          "&& $icon": {
            color: "blue"
          }
        }
      }
    }
  }
});

相关的JSS文档：https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet