mui v5：如何覆盖 MuiTableCell 中的 ArrowDownwardIcon

Question

我正在尝试使用这样的全局主题更改 TableCell 中 ArrowDownIcon 的默认颜色：

MuiTableSortLabel: {
    styleOverrides: {
        root: {
            '&&.MuiTableSortLabel-icon':{
                color:'#fff'
            },
            '&.Mui-active': {
                color: '#787878 !important',
                '&&.MuiTableSortLabel-icon': {
                    color: '#fff'
                }
            },
            '&&.MuiButtonBase-root': {
                '&&.Mui-active': {
                color: '#fff'
                }
            } 
        },

    }
}

问题是，图标 class 像这样获取另一个 class：[1]: https://i.stack.imgur.com/lhYW4.png所以我尝试了这种方法来覆盖它，只是没有成功：

MuiButtonBase: {
        styleOverrides: {
                root: {
                    '&&.Mui-active': {
                            color: '#fff !important',
                            '&&.MuiTableSortLabel-icon':{
                                color:'#fff'
                            }
                    },  
                    '&&.MuiTableSortLabel-root': {
                        '&&.Mui-active' : {
                            '&&.MuiTableSortLabel-icon':{
                            color: '#fff',
                            }
                        },
                    }
                }
        },
    },

知道如何解决这个问题吗？ 感谢任何输入:)

Answer 1

对你的问题的简短回答是：

MuiTableSortLabel: {
  styleOverrides: {
    root: {
      "&.Mui-active .MuiTableSortLabel-icon": {
        color: "red",
      },
    },
  },
},

长答案是您似乎误解了“&”的工作原理。 “&”称为嵌套选择器，代表父规则匹配的元素。 巩固该陈述的最佳方法可能是使用一系列示例。

MuiTableSortLabel: {
  styleOverrides: {
    root: {
      "&": { color: "red" },
      "&&": { color: "red" },
    },
  },
},

// "&" results in a selector of
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root

// "&&" results in the selector duplicating (increasing specificity)
.css-1r3m9rx-MuiButtonBase-root-MuiTableSortLabel-root.css-1r3m9rx-MuiButtonBase-root-MuiTableSortLabel-root

那么您可能会问以下结果是什么？

MuiTableSortLabel: {
    styleOverrides: {
        root: {
            '&.Mui-active': {
                color: '#787878 !important',
                '&&.MuiTableSortLabel-icon': {
                    color: '#fff'
                }
            },
        },
    },
},

// &.Mui-active becomes the following:
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root.Mui-active

// the nested "&&.MuiTableSortLabel-icon" then does the following
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root.Mui-active.Mui-active.Mui-active.MuiTableSortLabel-icon

请注意“&”的嵌套用法如何变为“.MuiActive”，因为这是新的父规则。 并复制 & 结果 in.Mui-active 复制也是如此。

如果您更喜欢原始问题中的嵌套选择器，则以下内容也将起作用。 嵌套完全取决于您的开发人员偏好。

    MuiTableSortLabel: {
      styleOverrides: {
        root: {
          "&.Mui-active": {
            // the leading space is important for this to correctly target the child element
            " .MuiTableSortLabel-icon": {
              color: "red",
            },
          },
        },
      },
    },