reactjs - 如何在覆盖主题中为班级孩子应用样式?
问题描述
如何在覆盖主题中为班级孩子应用样式?
我有这个代码
<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
}
}
但是在“selected”里面运行“label”后无法识别,只有“label”是白色的。选定 > 标签不起作用。
我对此进行了解释,但只找到了直接应用于组件或 js 代码的 css 样式。
有什么办法可以做到这一点,或者更好地应用旧的 css(文件)方式?
使用 css 文件这项工作
button[class*="MuiToggleButton-selected"] span[class^="MuiToggleButton-label"]{
color: #0000ff;
}
我感谢任何资源(书籍、教程等)让我对此有更多的了解。
Tks 提前
解决方案
我在这里发现了一个类似的问题
selected: {
backgroundColor: '#a1b0e2a8 !important',
'&>span': { // I need put > after &
color: '#0000ff !important'
}
},
推荐阅读
- google-apps-script - 仅当复选框为真时运行脚本
- rsa-archer-grc - 如何在工具栏内容下的订阅通知内的现有字段中添加字段?
- git - 从我的“.git/info/exclude”文件中包含的合并中排除文件的最佳方法是什么?
- docker - 运行可以通过 SSH 连接到的本地 docker 容器
- java - Java检查两个列表中有多少元素相同
- django - 如何将基本查询集与具有分组数据的查询集结合起来?
- reactjs - useState / useEffect 反应传播运算符的错误
- xml - 如何反序列化java Long哪个xml标签有xsi:nil?
- regex - solr 模式替换过滤器
- python - 将 2 个数据框合并为 1 个结果数据框