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

Question

我的表单中有两个必填字段。我希望星号颜色应为红色。目前它显示为黑色。我正在使用 Material UI react 库？这是我的代码 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

基于此documentation on how to customize components through theme overrides对于FormLabel (which will also include InputLabel) ，你应该使用createMuiTheme并添加以下覆盖:

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

然后，将 <form> 包装起来在<MuiThemeProvider>内像这样:

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

...
...
...

  </form>
</MuiThemeProvider>

这是一个forked code sandbox它演示了此代码的实际操作。

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

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