material ui border color overwriting the texbox

Question

• when I intially load the page the border color of the text box should be red in color.
• but the problem is its showing grey color.
• so I gave border color: red to all the classes.
• but still it doesnt change.

• not sure how to target this tag.

• i achieved by giving important. is it possible to achieve without giving important

• can you guys let me know so that in future I will fix it myself.

• providing my code snippet and sandbox below.

https://codesandbox.io/s/m58841kkwp

 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

The problem is that your CustomizedInputs-notchedOutline class is being overwritten by the MuiOutlinedInput-notchedOutline class, the output css is something like this:

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

You have to use or create a stronger selector to the element something like this:

.more.class {    //multiple class selector
    border-color: red; 
}

Note: if you have access to the class that is overwriting yours just change it.

EDIT: As I told you, you can use a stronger selector, add & $notchedOutlineselector to cssOutlinedInput something like this:

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

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

and of course remove the !important from notchedOutline: { borderColor: "red !important" },