score:1

Accepted answer

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


Related Query

More Query from same tag