如何修改Material UI TextField标签中星号的颜色

下面提供几种无需单独配置TextField标签的实现方式：

方法1：内联sx属性（单个组件场景推荐） #

直接在TextField的sx属性中通过嵌套选择器定位必填星号的类，修改其颜色：

<TextField
  id="outlined-basic"
  label="Name"
  variant="outlined"
  required
  sx={{
    '& .MuiInputLabel-asterisk': {
      color: 'red',
    },
  }}
/>

这种方式无需额外定义样式类，直接在组件上配置即可生效。

方法2：自定义CSS类（多组件复用场景） #

1. 在CSS文件中定义目标样式：

.textfield-red-asterisk .MuiInputLabel-asterisk {
  color: red;
}

2. 在TextField上添加自定义类名：

<TextField
  id="outlined-basic"
  label="Name"
  variant="outlined"
  required
  className="textfield-red-asterisk"
/>

方法3：全局主题覆盖（全项目统一修改场景） #

通过Material UI的主题配置全局修改所有必填TextField的星号颜色：

import { createTheme, ThemeProvider } from '@mui/material/styles';

// 自定义主题
const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        asterisk: {
          color: 'red',
        },
      },
    },
  },
});

// 在根组件中包裹应用
function App() {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        id="outlined-basic"
        label="Name"
        variant="outlined"
        required
      />
    </ThemeProvider>
  );
}

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