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

Question

• Я пытаюсь переписать материал UI CSS.
• для текстового поля. Мне нужно задать цвет рамки красным.
• , но проблема в том, что нижняя граница перезаписана
• когда я отлаживал, я обнаружил, что он перезаписан этим классом MuiInput-underline-904: до
• вы можете сказать мне, как это исправить.
• , предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/nk2ym81qwl

  textField: {
    flexBasis: 200,
    border: "1px solid red"
  }

<TextField
          select
          label="With Select"
          className={classNames(classes.margin, classes.textField)}
          value={this.state.weightRange}
          onChange={this.handleChange("weightRange")}
          InputProps={{
            startAdornment: <InputAdornment position="start">Kg</InputAdornment>
          }}
        >
          {ranges.map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>

проблема возникает из-за кода ниже

.MuiInput-underline-904:before {
    left: 0;
    right: 0;
    bottom: 0;
    content: "\00a0";
    position: absolute;
    transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    pointer-events: none;
}


<div class="MuiInputBase-root-913 MuiInput-root-900 MuiInput-underline-904 MuiInputBase-formControl-914 MuiInput-formControl-901 MuiInputBase-adornedStart-917">

Answer 1

textField {
  flexBasis: 200,
  border: 1px solid red !important;
}

Используйте! Важно, чтобы заставить ваш стиль.