как изменить цвет звездочки в обязательном * поле

Question

В моей форме есть два обязательных поля. Я хочу, чтобы цвет звездочки был red. В настоящее время он показывает черный цвет. Я использую библиотеку реагирования пользовательского интерфейса материала?вот мой код 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 реквизиты .

Ниже приведены соответствующие частииз вашего кода, который я изменил.Также обратите внимание, что для звездочки по умолчанию используется красный цвет, если вход находится в состоянии «ошибка».Например, если вы добавите свойство 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 2

На основании этой документации о том, как настроить компоненты с помощью переопределений тем для 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>, который у вас уже есть вВаш код.

Полученные метки формы выглядят так: