如何在覆盖主题中为类子应用样式?
我有这个代码
<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;
}
我感谢任何资源(书籍,教程等)给我更多的知识。
请求提前
我发现了一个类似的问题here
selected: {
backgroundColor: '#a1b0e2a8 !important',
'&>span': { // I need put > after &
color: '#0000ff !important'
}
},