CODEWITHSUNDEEP
cssreactjsmaterial-ui
user2529173
user2529173

Reputation: 1924

Change default border color of outline textfield

I want to change the default border color of an outlined textfield from gray to a darker blue.

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

This is the codeInputclass: 

  codeInput: {
     marginTop: theme.spacing.unit,
  },

I have tried overriding the color via theme, but it does not work:

  overrides: {
    MuiOutlinedInput: {
      root: {
        borderColor: "#2b303e"
      },
      notchedOutline: {
        borderRadius: "0",
        borderWidth: "2px",
        borderColor: "#2b303e"
      },
    },
  }

It is still gray as you can see in the image. I have identified the following css rules as the problem. With disabling this, everything looks fine. I just don't know how to do this

.MuiOutlinedInput-root-148 .MuiOutlinedInput-notchedOutline-155 {
    border-color: rgba(0, 0, 0, 0.23);
}

enter image description here

Upvotes: 0

Views: 410

Answers (1)

Luke Walker
Luke Walker

Reputation: 501

Create a new css class for example:

// app.css
.blueBorder {
}

Add in the border you want and add !important; to overwrite.

// app.css
.blueBorder{
    border-radius: 0px!important;
    border: 2px solid #2b303e!important;
}

Assign it to your component:

// js /  react component
<TextField
    variant={"outlined"}
    placeholder={t('landing_page.code.placeholder')}
    onChange={this.onCodeChanged}
    value={code}
    fullWidth={true}
    className={`blueBorder ${classes.codeInput}`}
/>

Update to show error class

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

Use the error class in the components 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}}
/>

Upvotes: 0

Related Questions