如何在JSS中为嵌套主题全局覆盖MUIv4的组合样式类？

为什么直接配置MuiInputLabel的overrides不生效 #

MUI v4中InputLabel组件继承自FormLabel基础组件，outlined、shrink两个状态对应的默认样式规则，实际挂载在MuiFormLabel的样式节点下，默认权重高于MuiInputLabel下的自定义规则，因此你在MuiInputLabel下写的匹配规则会被默认样式覆盖。
你尝试的嵌套组件名写法不生效的核心原因是：overrides字段下的嵌套组件名语法，仅支持父子组件的插槽样式覆盖（例如MuiTable下嵌套MuiTableCell修改表格单元格样式），而shrink是当前组件的状态类，不是独立子组件，因此不能用这种简洁写法匹配。
正确的主题配置写法如下：

import { createTheme } from '@material-ui/core/styles';
import inputLabelClasses from '@material-ui/core/InputLabel/inputLabelClasses';

const customTheme = createTheme({
  overrides: {
    MuiFormLabel: {
      root: {
        // 同时匹配两个状态类的选择器写法
        [`&.${inputLabelClasses.outlined}.${inputLabelClasses.shrink}`]: {
          transform: 'translate(12px, -8px) scale(0.75)' // 替换为你需要的样式值
        }
      }
    }
  }
});

如何查看createTheme生成的类名 #

• 浏览器开发者工具元素面板：选中页面上对应的组件元素，在样式标签页可以直接看到所有生效的MUI内置类名，同时可以查看自定义样式的优先级、是否被覆盖。
• 打印theme对象：在代码中将createTheme生成的主题对象直接console.log输出到控制台，展开classes字段即可看到所有组件的类名映射，展开overrides字段可以查看自定义规则是否被正确注入。
• 导入官方类名常量：每个MUI组件都暴露了内置类名的常量对象，例如从@material-ui/core/InputLabel/inputLabelClasses可以导入InputLabel所有状态对应的类名，写配置时直接引用常量即可避免手写类名的拼写错误。

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