Question

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

我有这个代码

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

因此，我需要为“ 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
  }
}

但是在“ selected”内运行“ label”后，无法识别，只有“ label”为白色。选择>标签无效。

我对此进行了解释，但只发现直接将CSS样式直接应用于组件或js代码。

有什么方法可以执行此操作，还是最好采用旧的CSS（文件）方法？

使用CSS文件完成这项工作

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

我非常感谢您提供任何资源（书籍，教程等），以向我提供更多相关知识。

提前提示

Answer 1

我发现了类似的问题here

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

如何为替代主题中的班级孩子应用样式？

1 个答案: