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?

TaylorSanchez
  • 463
  • 1
  • 5
  • 8
  • 1
    Look here: https://www.headway.io/blog/global-styling-with-material-ui-theme-overrides-and-props and here: https://material-ui.com/api/switch/#css – MaxAlex Dec 06 '20 at 04:40
  • Thanks! I looked at the source code link in the switch css link and figured out I needed to add "&+$track" to the disabled section I had started – TaylorSanchez Dec 06 '20 at 19:29

1 Answers1

0

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
      }
    }
  },
TaylorSanchez
  • 463
  • 1
  • 5
  • 8