Question

我的表单中有两个必填字段。我希望星号颜色应为red。当前它显示为黑色。我正在使用材质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>内

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

Answer 2

Alvin的答案显示了如何在主题中全局进行此操作。您也可以通过FormLabel asterisk class使用InputLabel props视情况进行操作。

以下是您更改的代码中的相关部分。另请注意，如果输入处于“错误”状态，则星号的默认行为是将其变为红色。例如，如果您将error属性添加到TextField，星号将变为红色，但这不仅会对星号产生影响，还会对样式产生影响。

const styles = {
  labelAsterisk: {
    color: "red"
  }
};

<InputLabel
                    FormLabelClasses={{
                      asterisk: this.props.classes.labelAsterisk
                    }}
                    required
                    shrink
                    htmlFor="age-native-simple"
                  >
                    Age
                  </InputLabel>

                  <TextField
                    required
                    InputLabelProps={{
                      shrink: true,
                      FormLabelClasses: {
                        asterisk: this.props.classes.labelAsterisk
                      }
                    }}
                    id="standard-name"
                    label="Name"
                    margin="normal"
                    helperText="Some important text"
                  />

const StyledApp = withStyles(styles)(App);

Answer 3

尝试简单易用

render(){
    const name = <p>Name<span style={{ color: "red" } >*</span></p>
    const email = <p>Email<span style={{ color: "red" } >*</span></p>
    .
    .
    .
    return (
        <div>

            <TextField type="text" label={name} />//or Input tag
            <TextField type="email" label={email} />//or Input tag
            .
            .
            .
        </div>
    )
}

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

3 个答案: