Как применить стиль для дочернего класса в теме переопределения? - PullRequest
Новая
       17

Как применить стиль для дочернего класса в теме переопределения?

0 голосов
/ 24 марта 2019

Как применить стиль для дочернего класса в теме переопределения?

У меня есть этот код 

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

Здесь у меня есть 3 класса CSS (MuiButtonBase-root, MuiToggleButton-root и MuiToggleButton-selected)

Поэтому мне нужно применить собственный цвет для надписи внутри «выбранного» класса.Я попробовал это переопределение в моей теме 

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

Но после запуска "label" внутри "selected" не распознается, только "label" белого цвета.selected> label не работает.

Я смотрю объяснение для этого, но только нашел стили CSS, примененные непосредственно к компоненту или js-коду для этого.

Есть ли способ сделать это или лучше применить старый способ CSS (файл)?

Использование css-файла этой работы 

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

Я ценю любой ресурс (книга, учебное пособие и т. Д.), Который дал мне больше знаний об этом.

Tks for advance

1 Ответ

0 голосов
/ 25 марта 2019

Я нашел похожий вопрос здесь 

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