React中MUI TextField自定义样式不生效，求问题排查

尝试为MUI的TextField组件配置自定义主题，编写的代码如下：

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          color: "red"
        },
      },
    },
  },
});

function mycomp(){
  return(
    <ThemeProvider theme={theme}>
     <TextField
          sx={{ width: "80%" }}
          id="template-name"
          name="template"
          label="Template Name"
          type="text"
          variant="standard"
          helperText="Specify a name for the template in format"
        />
    </ThemeProvider>
  );
}

但TextField的颜色并未发生变化，请问哪里操作出现了错误？

TextField是MUI的复合组件，它由InputLabel、Input、FormHelperText等多个底层组件组合而成。你直接设置MuiTextField的root样式，只会作用于TextField最外层的容器div，而输入文本、标签、辅助文本这些内部元素都有自己默认的样式规则，会覆盖容器继承来的color属性，所以看不到颜色变化。

以下是几种可行的修改方式：

方式一：通过主题配置底层组件 #

直接针对TextField依赖的底层组件设置样式，这种方式会全局生效：

const theme = createTheme({
  components: {
    // 修改输入文本颜色
    MuiInput: {
      styleOverrides: {
        root: {
          color: "red",
          // 如果是standard变体，可同时修改下划线颜色
          '&:before': {
            borderBottomColor: 'red',
          }
        }
      }
    },
    // 修改标签颜色
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: "red"
        }
      }
    },
    // 修改辅助文本颜色
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          color: "red"
        }
      }
    }
  },
});

方式二：在MuiTextField的styleOverrides中嵌套选择内部类名 #

通过CSS嵌套选择器，直接定位到TextField内部的元素类名：

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          // 输入文本颜色
          '& .MuiInput-input': {
            color: 'red'
          },
          // 标签颜色
          '& .MuiInputLabel-root': {
            color: 'red'
          },
          // 辅助文本颜色
          '& .MuiFormHelperText-root': {
            color: 'red'
          }
        },
      },
    },
  },
});

方式三：使用sx道具直接覆盖（适合单个组件自定义） #

如果只需要修改当前这一个TextField的样式，直接用sx道具更便捷：

<TextField
  sx={{
    width: "80%",
    // 输入文本颜色
    '& .MuiInput-input': { color: 'red' },
    // 标签颜色
    '& .MuiInputLabel-root': { color: 'red' },
    // 辅助文本颜色
    '& .MuiFormHelperText-root': { color: 'red' },
    // standard变体下划线颜色
    '& .MuiInput-underline:before': { borderBottomColor: 'red' }
  }}
  id="template-name"
  name="template"
  label="Template Name"
  type="text"
  variant="standard"
  helperText="Specify a name for the template in format"
/>

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