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

在组件className中使用错误类 condition ? true : false

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

更改轮廓文本字段的默认边框颜色

1 个答案: