材质ui边框颜色覆盖文本框

Question

• 当我最初加载页面时，文本框的边框颜色应为红色。
• 但问题是它显示为灰色。
• 所以我给所有的类赋予了边框颜色：红色。
• 但它仍然没有改变。

• 不确定如何定位此标签。

• 我通过给予重要来实现。有没有可能在不重要的情况下实现？

• 你们能不能让我知道，以便将来我自己修复它。

• 在下面提供我的代码 sn-p 和沙箱。

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; 
}

注意：如果您有权访问覆盖您的类，只需更改它。

编辑： 正如我告诉你的，你可以使用更强大的选择器，将 & $notchedOutlineselector 添加到 cssOutlinedInput 中，如下所示：

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

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

当然还有从notchedOutline: { borderColor: "red !important" }, 中删除!important