Material UI MuiTab样式覆盖&$selected警告消除后样式不生效求助

失效原因 #

你把&$selected移入root属性后样式不生效，是因为JSS语法中$符号用于引用同一份样式配置内的本地规则，你当前的MuiTab覆盖配置中没有声明selected规则，导致$selected无法解析到对应的类名，样式匹配失败。

可用解决方案 #

方案一（推荐）：使用全局类名匹配 #

直接用MUI内置的全局选中状态类名.Mui-selected代替本地引用，兼容性最好，不需要额外配置：

MuiTab: {
    root: {
        color: '#284568',
        '&.Mui-selected': {
            backgroundColor: '#000',
            border: '1px solid #CFDCE8',
        },
    },
    textColorInherit: {
        opacity: 1,
    },
    wrapper: {
        textTransform: 'capitalize',
    },
},

方案二：补充本地selected规则声明 #

如果你要保留$selected的JSS引用写法，只需在MuiTab配置的同级添加空的selected规则声明即可：

MuiTab: {
    root: {
        color: '#284568',
        '&$selected': {
            backgroundColor: '#000',
            border: '1px solid #CFDCE8',
        },
    },
    selected: {}, // 补充该声明即可让$selected正常解析
    textColorInherit: {
        opacity: 1,
    },
    wrapper: {
        textTransform: 'capitalize',
    },
},

内容的提问来源于stack exchange，提问作者Or Assayag