Как изменить цвет метки в состоянии ошибки в реакции? - PullRequest
Новая
       55

Как изменить цвет метки в состоянии ошибки в реакции?

0 голосов
/ 01 марта 2019

Подскажите, пожалуйста, как изменить цвет метки и цвета поля ввода в состоянии ошибки в материале?

Я пробовал вот так 

<FormControl>
                  <TextField
                    required
                    error
                    classes={{
                      error: this.props.classes.error

                    }}
                    InputLabelProps={{
                      shrink: true,
                      FormLabelClasses: {
                        asterisk: this.props.classes.labelAsterisk,
                        error: this.props.classes.error

                      }
                    }}
                    id="standard-name"
                    label="Name"
                    margin="normal"
                    helperText="Some important text"
                  />
                </FormControl>

вот документация https://material -ui.com / api / input / мой код

https://codesandbox.io/s/007k3v472w

в данный момент на error состоянии он показывает цвет метки red и redграница поля ввода. Я хочу green метку и зеленый border в поле ввода любое обновление

1 Ответ

0 голосов
/ 01 марта 2019

Правила свойств, определенные в объекте стиля, не переопределяют правила, предусмотренные в теме по умолчанию, поскольку они имеют меньшую специфичность.

Для одного из них цвет ошибки входной метки задается в селекторе CSS '.root.error', игнорируяПрефиксы компонентов добавлены в имена селекторов.

Какие селекторы используются для нацеливания на элемент, можно узнать в разделе «Стили» консоли разработчика браузера.

CSS Property Inspector in Dev Console

Это то же самое, что цвет для состояния ошибки текста звездочки и помощника формы.

Чтобы сгенерировать аналогичные селекторы, вам нужно написать объект стилей как: 

const styles = {
  root: {
    '&$error': {
      color: "green"
    }
  },
  asterisk: {
    '&$error': {
      color: "green"
    }
  },
  underline: {
    '&$error:after': {
      borderBottomColor: "green",
    }
  },
  error: {
  }
};

Здесь я заменил color с red на green.

Rendered UI change

В TextField переопределить InputProps.classes, FormHelperTextProps.classesи InputLabelProps.FormLabelClasses

const { classes } = this.props 
//...
return (
  <TextField
    //...
    InputProps={{
      classes: {
        root: classes.root,
        error: classes.error,
        underline: classes.underline
      }
    }}
    FormHelperTextProps={{
      classes: {
        root: classes.root,
        error: classes.error
      }
    }}
    InputLabelProps={{
      shrink: true,
      FormLabelClasses: {
        root: classes.root,
        asterisk: classes.asterisk,
        error: classes.error
      }
    }}
    //...
  />
)
...