如何更改必填 * 字段中的星号颜色

Question

我的表单中有两个必填字段。我希望星号颜色应该是red。目前它显示为黑色。我正在使用材料 UI 反应库？这是我的代码 https://codesandbox.io/s/r7lq1jnjl4 文档 https://material-ui.com/demos/text-fields/

<FormControl>
                  <TextField
                    required
                    InputLabelProps={{
                      shrink: true
                    }}
                    id="standard-name"
                    label="Name"
                    margin="normal"
                    helperText="Some important text"
                  />
                </FormControl>

Answer 1

在此基础上就如何通过主题覆盖自定义组件文件的FormLabel（其中也包括InputLabel） ，你应该使用createMuiTheme，并添加以下覆盖：

const formLabelsTheme = createMuiTheme({
  overrides: {
    MuiFormLabel: {
      asterisk: {
        color: '#db3131',
        '&$error': {
          color: '#db3131'
        },
      }
    }
  }
})

然后，你将你的包裹<form>在一个<MuiThemeProvider>像这样：

<MuiThemeProvider theme={formLabelsTheme}>
  <form noValidate autoComplete="off">

...
...
...

  </form>
</MuiThemeProvider>

这是一个分叉的代码沙箱，它演示了此代码的实际操作。

由于您已经在创建一个主题，因此您可以将您的覆盖放在该主题中，但您需要将您的覆盖移动<form>到<MuiThemeProvider>您的代码中已有的范围内。

生成的表单标签如下所示：

Answer 2

在Mui v5中：

const theme = createTheme({

  components: {
    MuiFormLabel: {
      styleOverrides: {
        asterisk: {color:"red"},
      },
    },
  },

})

Answer 3

根据最新版本的 Material UI。IE。"@mui/material": "^5.0.1"

我们可以这样做：

 <FormLabel required>Name:</FormLabel>

并在主题中：

import { createTheme } from "@mui/material";

export const theme = createTheme({
  components: {
    MuiFormLabel: {
      styleOverrides: {
        asterisk: {
          color: "#db3131",
          "&$error": {
            color: "#db3131",
          },
        },
      },
    },
  },
});