禁用颜色样式的React Switch

Question

我正在尝试为包含禁用自定义颜色的react Switch创建配色方案。我有一个定制的Switch，它有红色和绿色，并带有打开和关闭文本。我主要是从其他例子中拼凑出来的。我不确定我在withStyles中需要什么。当开关被禁用时，Styles的颜色变灰了。

在下面的例子中，我想用灰色显示底部的两个，因为它们被禁用了

https://codesandbox.io/s/material-demo-forked-9cn2w?file=/demo.js

我在其他组件上的Styles选项拼接时也遇到了不少问题。有没有我错过的文件，会概述像"&：在'/'track'/'checked'关键字之前？它们似乎是针对Switch组件的，所以我需要更多地深入研究Switch文档吗？

Answer 1

MaxAlex为我指明了切换css源代码的正确方向。这就是我的结局。梯度似乎没有必要，但它不会只需要"#737373"；。无论如何，它都是概念验证代码。

disabled: {
"& + $track": {
background: "linear-gradient(to right, #737373, #737373)",
"&:before": {
opacity: 0
},
"&:after": {
opacity: 1
}
},
'&$checked + $track':{
background: "linear-gradient(to right, #737373, #737373)",
"&:before": {
content: '"on"',
opacity: 1
},
"&:after": {
content: '"off"',
opacity: 0
}
}
},