Material-ui - TextField - Невозможно изменить цвет ошибки вспомогательного текста

У меня form с очень неудобным цветом фона. Хотелось бы изменить цвет вспомогательного текста Outlined TextField, когда он находится в состоянии ошибки, но не может его отменить. Сохраняется красный цвет.

См. CodeSandBox.


reactjs material-ui jss
person Lyle Classen    schedule 28.11.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Проблема вызвана спецификой CSS (базовый стиль имеет более конкретное имя класса, т.е. MuiFormHelperText-root.Mui-error, чем класс замещающего стиля). рекомендуется использовать синтаксис &$ в этом случае:

const helperTextStyles = makeStyles(theme => ({
  root: {
    margin: 4,
    '&$error': {
      color: 'white'
    }
  },
  error: {} //<--this is required to make it work
}));

Вы также можете обратиться к этот раздел для примера и дополнительных пояснений.

person Claire Lin    schedule 28.11.2019
comment
Я был вынужден использовать _1 _... как color: 'white !important' - person Mosia Thabo; 17.08.2020

arrow_upward
0
arrow_downward

По какой-то причине цвет текста ошибки генерируется под следующим className: .MuiFormHelperText-root.Mui-error
Поэтому одного правила переопределения ошибки недостаточно.
Это поможет:

const helperTextStyles = makeStyles(theme => ({
  root: {
    margin: 4,
    color:'black',
  },
  error: {
    "&.MuiFormHelperText-root.Mui-error" :{
      color: theme.palette.common.white,
    },
  },
}));

Тестовая среда кода

person Ido    schedule 28.11.2019