css - 更改大纲文本字段的默认边框颜色

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

在组件类名中使用错误类条件？真:假

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