Изменить цвет границы по умолчанию для текстового поля контура

Question

Я хочу изменить цвет границы по умолчанию для выделенного текстового поля с серого на темно-синий.

              <TextField
            variant={"outlined"}
            placeholder={t('landing_page.code.placeholder')}
            onChange={this.onCodeChanged}
            value={code}
            fullWidth={true}
            className={classes.codeInput}
            error={code ? code.length < 10 : false}
          />

Это класс codeInput:

  codeInput: {
     marginTop: theme.spacing.unit,
  },

У меня естьпопытался переопределить цвет через тему, но он не работает:

  overrides: {
    MuiOutlinedInput: {
      root: {
        borderColor: "#2b303e"
      },
      notchedOutline: {
        borderRadius: "0",
        borderWidth: "2px",
        borderColor: "#2b303e"
      },
    },
  }

Он все еще серый, как вы можете видеть на изображении.Я определил следующие правила CSS как проблему.С отключением этого все выглядит нормально.Я просто не знаю, как это сделать

.MuiOutlinedInput-root-148 .MuiOutlinedInput-notchedOutline-155 {
    border-color: rgba(0, 0, 0, 0.23);
}

Answer 1

Создайте новый класс CSS, например:

// app.css
.blueBorder {
}

Добавьте нужную границу и добавьте !important; для перезаписи.

// app.css
.blueBorder{
    border-radius: 0px!important;
    border: 2px solid #2b303e!important;
}

Назначьте его компоненту:

// js /  react component
<TextField
    variant={"outlined"}
    placeholder={t('landing_page.code.placeholder')}
    onChange={this.onCodeChanged}
    value={code}
    fullWidth={true}
    className={`blueBorder ${classes.codeInput}`}
/>

Обновление для отображения класса ошибок

// app.css
.blueBorder{
    border-radius: 0px!important;
    border: 2px solid #2b303e!important;
}
// Red border to denote error
.blueBorder-error {
   border-radius: 0px!important;
   border: 2px solid red!important;
}

Использованиекласс ошибок в компонентах className condition ? true : false

// js / component

<TextField
    variant={"outlined"}
    placeholder={t('landing_page.code.placeholder')}
    onChange={this.onCodeChanged}
    value={code}
    fullWidth={true}
    className={code.length < 10 ? `blueBorder-error ${classes.codeInput}` : `blueBorder ${classes.codeInput}}
/>