如何在覆盖主题中为班级孩子应用样式？答案

【问题标题】：How apply style for class child in override theme?如何在覆盖主题中为班级孩子应用样式？
【发布时间】：2019-08-15 01:23:45
【问题描述】：

如何在覆盖主题中为班级孩子应用样式？

我有这个代码

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

但运行后“选中”里面的“标签”无法识别，只有“标签”白色。已选择 > 标签不起作用。

我对此进行了解释，但只找到了直接应用于组件或 js 代码的 css 样式。

有什么方法可以做到这一点，或者更好地应用旧的 css（文件）方式？

使用 css 文件完成这项工作

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

感谢任何资源（书籍、教程等）让我对此有更多的了解。

提前致谢

【问题讨论】：

可以分享一下代码吗？
抱歉，代码已更新。

标签： reactjs themes overriding classname

【解决方案1】：

我发现了一个类似的问题here

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

【讨论】：