withStyles Material UI.

style.js

//Component to style doc: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Switch/Switch.js

import Switch from "@material-ui/core/Switch";
import styled from "styled-components";
import { withStyles } from "@material-ui/core/styles";

const StyledSwitch = styled(Switch)`
  .MuiSwitch-colorSecondary {
    color: green;
    :hover {
      background: red;
    }
  }

  .MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track {
    background: green;
    opacity: 1;
  }

  .MuiSwitch-colorSecondary + .MuiSwitch-track {
    background: black;
    opacity: 1;
  }

  .MuiSwitch-colorSecondary.Mui-checked {
    color: black;
  }
`;


const WithStyledSwitch = withStyles({
  switchBase: {
    color: "blue",
    "&:hover": {
      background: "red",
      color: "white"
    },
    "&$checked + $track": {
      color: "black",
      backgroundColor: "pink",
      opacity: 1
    }
  },
  colorSecondary: {
    "&$checked": {
      color: "pink",
      "&:hover": {
        background: "transparent"
      }
    }
  },
  checked: {},
  disabled: {},
  track: {
    background: "blue",
    opacity: 1
  }
})(Switch);