Material UI withStyles，尝试深入到禁用的开关 css 覆盖答案

【问题标题】：MaterialUI withStyles, trying drilling down to a disabled switches css overrideMaterial UI withStyles，尝试深入到禁用的开关 css 覆盖
【发布时间】：2021-04-14 14:53:36
【问题描述】：

我正在前端使用 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.

【问题讨论】：

请添加您的代码（图片不够）。
我认为这并不容易，特别是他们有一些复杂的选择器。对我来说最好的方法是通过浏览器检查找到我想要更改其样式的元素，并查看需要更改的属性，然后将该样式应用于该选择器。您可以随时阅读源代码，有时可能会有所帮助。
好的，我添加了样式对象@OrAssayag
你想改变轨道颜色，对吧？

标签： css reactjs material-ui material-design react-with-styles

【解决方案1】：

<Switch classes={{ track: classes.track }} />

  track: {
    '.Mui-disabled + &&': {
      backgroundColor: 'hotpink',
    },
  },

这适用于默认的 MUI 开关。如果需要，您可以通过向选择器添加额外的& 来增加特异性。如果都失败了，请提供一个codeandbox，并在什么场景下准确说明你想要什么颜色。

【讨论】：

这很好用。非常感谢您提供的解决方案和对选择器的洞察！