如何解决MaterialUI withStyles,尝试深入到禁用的开关 css 覆盖
我在前端使用 react 和 MaterialUI 进行开发,我有一堆自定义输入。除了这个,一切都运行得很好。无论我使用哪种选择器组合,我似乎都无法指向正确的选择器来更改这种黑色。
此外,如果有一种清晰的方式来识别,只需查看元素选择器,即可深入了解正确的组件,这会很好。有没有办法做到这一点(教人钓鱼)。Here is the image of the element when I inspect it and the color I'm trying to get at.
这里是样式对象:
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
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
解决方法
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',},
这适用于默认的 MUI 开关。如果需要,您可以通过向选择器添加额外的 &
来增加特异性。如果一切都失败,请提供一个代码和框,并准确说明您在哪种情况下需要什么颜色。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。