如何为覆盖主题中的班级孩子应用样式?
我有这个代码
<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;
}
我非常感谢您提供任何资源(书籍,教程等),以向我提供更多相关知识。
提前提示
答案 0 :(得分:0)
我发现了类似的问题here
selected: {
backgroundColor: '#a1b0e2a8 !important',
'&>span': { // I need put > after &
color: '#0000ff !important'
}
},