Material UI v5如何通过全局样式覆盖修改InputLabel聚焦颜色

MUI InputLabel 聚焦状态全局样式覆盖方案 #

你之前的配置不生效是因为 MUI InputLabel 继承自 FormLabel 组件，默认聚焦样式的CSS选择器权重更高，导致你的自定义规则被覆盖，可选用以下任意一种方案实现需求：

方案1：仅修改InputLabel的聚焦样式（推荐）

在root插槽内通过嵌套状态选择器匹配聚焦状态，权重足够覆盖默认规则：

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          '&.Mui-focused': {
            color: 'red',
          }
        }
      }
    }
  }
});

方案2：统一修改所有FormLabel派生组件的聚焦样式

如果项目中Checkbox、Radio等组件的关联标签聚焦样式也要统一调整，可以直接覆盖FormLabel的规则：

const theme = createTheme({
  components: {
    MuiFormLabel: {
      styleOverrides: {
        root: {
          '&.Mui-focused': {
            color: 'red',
          }
        }
      }
    }
  }
});

注意事项 #

• 配置完成后需要确保自定义theme通过ThemeProvider包裹了整个应用的组件树，否则配置不会生效
• 如果在InputLabel组件上单独用了sx或者className指定了颜色，优先级会高于全局配置，需要自行调整

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