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",
            },
          },
        },
      },
    },