Nsryjdtyk

• 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>

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" },