Material UI makeStyles父类激活时如何覆盖子类动态样式

你遇到的是Material UI JSS样式系统的规则引用问题，同一makeStyles样式表内的自定义规则互相引用时，需要用$前缀标记目标规则名，不能直接写规则名称字符串。

修改后的样式代码 #

const useStyles = makeStyles((theme) => ({
  abc: {
    color: "white",
  },
  xyz: {
    // 用$前缀引用同一样式表内的abc规则，注意前面加.匹配类选择器
    "& .$abc": {
       color: "red"
    }
  }
}))

核心原理 #

• makeStyles生成的类名默认带动态哈希后缀，直接写& abc会被解析为匹配页面上的普通.abc类，找不到JSS生成的带哈希后缀的目标类
• 用$+规则名的写法，JSS在编译时会自动替换为对应规则生成的带哈希的实际类名，就能正确匹配到目标元素

替代兼容方案 #

如果是跨样式表引用，也可以直接给目标元素加固定类名配合选择器，比如给ListItem加fixed-abc类，样式里写& .fixed-abc也能生效，不过更推荐用上面的$规则引用写法，符合MUI的设计规范。

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