更改輪廓文本字段的默認邊框顏色

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 使用錯誤類 condition ? true : false 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}}
/>