Материал пользовательского интерфейса Цвет рамки перезаписывает

Question

• при частичной загрузке страницы цвет границы текстового поля должен быть красного цвета.
• , но проблема в том, что он отображается серым цветом.
• , поэтому я дал границуцвет: красный для всех классов.
• , но все равно он не меняется.

• не уверен, как нацелить этот тег.

• я достиг, дав важные.Можно ли этого достичь, не предоставляя важных

• Можете ли вы, ребята, сообщить мне, чтобы в будущем я сам это исправил.

• , предоставив мой фрагмент кода ипесочница внизу.

https://codesandbox.io/s/m58841kkwp

 cssLabel: {
    "&$cssFocused": {
      color: { borderColor: "red" }
    }
  },
  cssFocused: { borderColor: "red" },
  cssUnderline: {
    "&:after": {
      borderBottomColor: "red"
    }
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: "green"
    }
  },
  notchedOutline: { borderColor: "red !important" },



   <div className={classes.container}>
      <TextField
        className={classes.margin}
        InputLabelProps={{
          classes: {
            root: classes.cssLabel,
            focused: classes.cssFocused
          }
        }}
        InputProps={{
          classes: {
            root: classes.cssOutlinedInput,
            focused: classes.cssFocused,
            notchedOutline: classes.notchedOutline
          }
        }}
        label="Custom CSS border"
        variant="outlined"
        id="custom-css-outlined-input"
      />
    </div>

Answer 1

Проблема в том, что ваш CustomizedInputs-notchedOutline класс перезаписывается классом MuiOutlinedInput-notchedOutline, вывод css выглядит примерно так:

.CustomizedInputs-notchedOutline-1356 {
    border-color: red;  //this is your class
}

.MuiOutlinedInput-root-1382 .MuiOutlinedInput-notchedOutline-1389 {
    border-color: rgba(0, 0, 0, 0.23);   //this is the class that is overwriting yours
}

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

.more.class {    //multiple class selector
    border-color: red; 
}

Примечание: если у вас есть доступ к классу, который перезаписывает ваш, просто измените его.

EDIT: Как я уже говорил, вы можете использовать более сильный селектор, добавив & $notchedOutline селектор к cssOutlinedInput примерно так:

cssOutlinedInput: {
    "& $notchedOutline": {   //add this nested selector
       borderColor: "red",
    },

    "&$cssFocused $notchedOutline": {
       borderColor: "green"
    }
}

и, конечно, удалить !important из notchedOutline: { borderColor: "red !important" },