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 开关。如果需要，您可以通过向选择器添加额外的 & 来增加特异性。如果一切都失败，请提供一个代码和框，并准确说明您在哪种情况下需要什么颜色。