Material-ui: How to change focus color without overriding the classes but only with classNames

[bemineni]

We can over ride the colors of a component(InputLabel) with theme overrides

{
  root:{
  ....
  ....
  }
  focus:{
     color:'#000000'
  }
}

How can we changes with className
The below approach doesn't work.

{
  myInputLabel:{
      '&:focus:'{
            color:'#000000' 
      }
 }

<InputLabel className={classes.myInputLabel}>  

The default MUI Inputlabel classes overrides my custom css class applied using className

The theme override approach changes for all the InputLabel in my application. The theme class approach requires me to figure out all the default MUI css changes and re-include them in my custom theme override classes.

[bemineni]

I see this issue when we use InputLabel in conjunction with InputBase in a FormControl.

[oliviertassinari]

@bemineni We describe the approach in the documentation: https://material-ui.com/demos/text-fields/#customized-inputs.

This should work:

{
  root: {
    '&$focused': {
      color: '#000',
    },
  },
  focused: {},
}

<InputLabel classes={classes} />

[bemineni]

Finally got it thank you. This is a delicate application of CSS.
We have the similar winning classes from MaterialUI

.MuiFormLabel-root-121.MuiFormLabel-focused-122 {
  color: #303f9f;
 }

My custom class which is defined using

{
  root: {
    '&$focused': {
      color: '#000',
    },
  },
  focused: {},
}

wins only because the style sheets comes later.