css - MaterialUI withStyles,尝试深入到禁用的开关 css 覆盖
问题描述
我正在前端使用 react 和 MaterialUI 进行开发,并且我有一堆自定义输入。除了这个之外,一切都运行良好。无论我使用哪种选择器组合,我似乎都无法指向正确的选择器来更改这种黑色。
此外,如果能够通过查看元素选择器以明确的方式进行识别,从而深入到正确的组件中,那就太好了。有没有办法做到这一点(教一个人钓鱼之类的东西)。这是我检查元素时的图像以及我试图获得的颜色。
这是样式对象:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
解决方案
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
这适用于默认的 MUI 开关。如果需要,您可以通过向选择器添加额外的内容来增加特异性&
。如果一切都失败了,请提供一个代码框并准确说明在哪种情况下您想要什么颜色。
推荐阅读
- java - 保存父对象后自动保存子对象
- javascript - 调用多个函数'onClick'
- apache-spark - 尝试使用 Spark 和 AWS Glue 作为 Metastore 创建分桶表时出现异常
- ios - 安装已辞职的手表操作系统应用程序时出错
- vue.js - 是否可以从 URL 中包含 Vue.js 组件?
- cplex - 在主流程控制循环中使用 opl.end() 时如何修复错误
- scala - Scala 的可变集合的视图有什么懒惰之处?
- c++ - 在函数调用中定义要由线程访问的全局 const 字符串变量
- c# - 我如何控制列表视图项目的详细信息?
- sql - 如何将此游标操作转换为基于闭包层次结构的集合操作?