如何通过MUI Theme仅为<TextField color='primary'/>设置全局样式？

要实现仅对color="primary"的TextField应用全局样式、不影响color="secondary"组件的需求，核心是利用MUI给不同color属性的组件自动添加的类名来限定样式范围：

MUI的TextField在设置color="primary"时，根元素会被加上Mui-primary类；设置color="secondary"时则会加上Mui-secondary类。我们可以在Theme的styleOverrides中通过这个类名精准定位目标组件。

修改后的theme.js代码 #

components: {
  MuiTextField: {
    styleOverrides: {
      root: {
        // 仅对带有Mui-primary类的TextField应用样式
        "&.Mui-primary": {
          "& label.Mui-focused": {
            color: "red"
          },
          "& .MuiInput-underline:after": {
            borderBottomColor: "red"
          },
          "& .MuiOutlinedInput-root": {
            "& fieldset": {
              borderColor: "red"
            },
            "&:hover fieldset": {
              borderColor: "yellow"
            },
            "&.Mui-focused fieldset": {
              borderColor: "red"
            }
          }
        }
      }
    }
  }
}

app.js代码（无需修改） #

<TextField label="Primary Color" variant="outlined" /> {/* 会应用主题样式*/}
<TextField label="Secondary Color" variant="outlined" color="secondary" /> {/* 不会应用主题样式*/}

修改后，所有color="primary"（包括未显式设置color、默认使用primary的）TextField都会应用自定义样式，而color="secondary"的组件则不受影响。

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