嵌套类的 Material UI 主题样式

Posted 2023-02-22

【中文标题】嵌套类的 Material UI 主题样式

【英文标题】：MaterialUI theme styling for nested classes

【发布时间】：2020-05-07 15:56:12

【问题描述】：

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

在开发者工具中观察它有以下 CSS 选择器：

.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon 
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;

我怎样才能在 createMuiTheme 对象中做到这一点？

const theme = createMuiTheme(
    overrides : 
      MuiTableSortLabel: 
        root: 
          //i want to modify the icon color
          color: blue
        
      
    
)

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