0

I am trying to create color scheme for a react Switch that includes a disabled customized color. I have a customized Switch that goes red and green with an on and off text. I mostly pieced it together from other examples. I am uncertain what I need in the withStyles have greyed out colors when the switch is disabled.

In the below example I want to grey out the bottom two since they are disabled

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

I have had quite a few issues piecing together withStyles options on other components as well. Is there documentation that I missed that would outline things like the '&:before' / 'track' / 'checked' keywords? They are seem specific to the Switch component, so do I need to dig into the Switch documentation more?

4

1 回答 1

0

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
      }
    }
  },
于 2020-12-09T00:08:00.593 回答