Question

最初加载页面时，文本框的边框颜色应为红色。
但是问题在于它显示灰色。
所以我给了边框颜色：所有班级都用红色。
但仍然没有改变。
不确定如何定位此标签。

你们能让我知道，以便将来我自己修复它。
在下面提供我的代码段和沙箱。

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

注意：如果您有权访问覆盖您的类，则只需对其进行更改。

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

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

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

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

材质ui边框颜色覆盖texbox

1 个答案: