CODEWITHSUNDEEP
reactjsthemesoverridingclassname
Silvio
Silvio

Reputation: 83

How apply style for class child in override theme?

How apply style for class child in override theme?

I have this code

<button class="MuiButtonBase-root-359 MuiToggleButton-root-630 MuiToggleButton-selected-632" tabindex="0" type="button" value="1">
   <span class="MuiToggleButton-label-633">Jan</span>
   <span class="MuiTouchRipple-root-549"></span>
</button>

Here I have 3 css class (MuiButtonBase-root, MuiToggleButton-root and MuiToggleButton-selected)

So I need to apply a custom color to label inside "selected" class. I tried this override in my theme

MuiToggleButton: {
  root:{
    backgroundColor: '#5f5f5f'
  },
  selected: {
    backgroundColor: '#a1b0e2a8 !important',
    label: { //this not apply to "label" inside "selected" parent
      color: '#0000ff !important'
    }
  },
  label: {
    selected: { //this not work too
      color: '#ff0000 !important'
    },
    color: '#ffffff' //this apply to all MuiToggleButton-label css class
  }
}

But after run "label" inside "selected" is not recognized, only "label" white. selected > label not work.

I look explication for this but only found css styles applied directly to the component or js code for this.

There any way for do this or is better apply the old css (file) way?

Using css file this work

button[class*="MuiToggleButton-selected"]  span[class^="MuiToggleButton-label"]{
  color: #0000ff;
}

I appreciate any resource (book, tutorial, etc) for giving me more knowledge about this.

Tks for advance

Upvotes: 0

Views: 941

Answers (1)

Silvio
Silvio

Reputation: 83

I found a similar question here

selected: {
   backgroundColor: '#a1b0e2a8 !important',
   '&>span': { // I need put > after &
      color: '#0000ff !important'
   }
},

Upvotes: 1

Related Questions