Как удалить зеленый цвет из поля ввода в реагировать?

Question

Подскажите, пожалуйста, как убрать зеленый цвет из поля ввода в реакции? Я знаю, что это происходит из темы, я просто хочу удалить только для этой формы input и select поля.

Codesandbox

const theme = createMuiTheme({
  palette: {
    primary: green,
    secondary: green
  },
  overrides: {
    MuiInput: {
      underline: {
        color: "red",
        "&:hover:not($disabled):after": {},
        "&:hover:not($disabled):before": {}
      }
    }
  }
});

Answer 1

Я раздвоил ваш пример кода и отредактировал в переопределениях темы, чтобы изменить цвет метки формы https://codesandbox.io/s/j3763x65y3.

В файле test.js я отредактировал следующее:

под стили:

  noUnderline: {
    color: "grey",
    "&:after": {
      borderColor: "grey",
      color: "grey"
    },
  }

и как свойства для соответствующего TextField:

<TextField
          InputLabelProps={{
            shrink: true,
            focused: false
          }}
          InputProps={{
            classes: {
              focused: classes.noUnderline,
              underline: classes.noUnderline
            }
          }}
</TextField>

Я не смог быстро найти подходящее свойство классов для изменения сфокусированного цвета InputLabel, поэтому я просто отключил фокусировку с помощью focused: false, хотя это не очень элегантное решение, и я бы не использовал его в производстве.

Поскольку компонент TextField является компонентом, составленным из других компонентов, ознакомьтесь с документацией по API для компонента https://material -ui.com / api / text-field / , а также для его компонентов. состоит из.