React Switch withStyles disabled coloration

Question

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?

Answer 1

MaxAlex pointed me in the right direction for the switch css source code. Here is what I ended up with. The gradient seems unnecessary, but it won't take just "#737373". It is proof of concept code anyways.

  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
      }
    }
  },