Как изменить текстовое поле Material-UI и цвет надписи при ошибке и в фокусе

Question

У меня есть компонент Material UI TextField, для которого требуется некоторая настройка цвета:

• error
• focused

Я использую @ material-ui / core 3.8.1, и это <TextField /> компонент.

Я хочу избежать использования <MuiThemeProvider>

Вот как я попытался, основываясь на рекомендации, приведенной здесь для компонента Material-UI <Input /> и ответа здесь

Репродукция: https://codesandbox.io/s/q9yj0y74z6

Answer 1

Как уже говорилось в комментариях, вам необходимо переопределить свойство classes.

Синтаксис &$ относится к классу в той же таблице стилей. Вы почти подошли к своему примеру, но вам нужно передать класс ошибки.

const styles = muiTheme => ({
  label: {
    "&$focusedLabel": {
      color: "cyan"
    },
    "&$erroredLabel": {
      color: "orange"
    }
  },
  focusedLabel: {},
  erroredLabel: {},
  underline: {
    "&$error:after": {
      borderBottomColor: "orange"
    },
    "&:after": {
      borderBottom: `2px solid cyan`
    }
  },
  error: {}
});

<TextFieldMui
      InputLabelProps={{
        classes: {
          root: classes.label,
          focused: classes.focusedLabel,
          error: classes.erroredLabel
        },
      }}
      InputProps={{
        classes: {
          root: classes.underline,
          error: classes.error
        }
      }}
      {...props}
    />

https://codesandbox.io/s/9z70kz5vnr