React Switch withStyles 禁用着色答案

【问题标题】：React Switch withStyles disabled colorationReact Switch withStyles 禁用着色
【发布时间】：2020-12-06 02:49:02
【问题描述】：

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

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

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

我在拼凑其他组件上的样式选项时也遇到了很多问题。是否有我错过的文档会概述诸如“&:before”/“track”/“checked”关键字之类的内容？它们似乎是 Switch 组件特有的，所以我需要深入研究 Switch 文档吗？

【问题讨论】：

看这里：headway.io/blog/… 和这里：material-ui.com/api/switch/#css
谢谢！我查看了 switch css 链接中的源代码链接，发现我需要将“&+$track”添加到我开始的禁用部分

标签： react-native material-ui react-with-styles

【解决方案1】：

MaxAlex 为我指明了 switch 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
      }
    }
  },

【讨论】：