StyledSwitch.tsx

import { withStyles } from '@material-ui/core/styles'
import Switch, { SwitchProps } from '@material-ui/core/Switch'
import { FluidType } from 'enums'
import React from 'react'

const SwitchBase = withStyles({
  root: {
    paddingLeft: 0,
    width: 52,
    overflow: 'initial',
  },
  switchBase: {
    color: 'var(--greyBright)',
    width: 'auto',
    left: -8,
    '&$checked': {
      color: 'var(--greyBright)',
      '& + $track': {
        opacity: 1,
        backgroundColor: 'var(--multiColor)',
      },
    },
  },
  checked: {},
  track: {
    opacity: 1,
    backgroundColor: 'var(--greyDark)',
    marginTop: 'initial',
    marginLeft: 'initial',
    left: 0,
  },
})(Switch) as React.FC<StyledSwitchProps>

const SwitchElec = withStyles({
  switchBase: {
    '&$checked': {
      '& + $track': {
        backgroundColor: 'var(--elecColor)',
      },
    },
  },
  checked: {},
  track: {},
})(SwitchBase) as React.FC<StyledSwitchProps>

const SwitchWater = withStyles({
  switchBase: {
    '&$checked': {
      '& + $track': {
        backgroundColor: 'var(--waterColor)',
      },
    },
  },
  checked: {},
  track: {},
})(SwitchBase) as React.FC<StyledSwitchProps>

const SwitchGas = withStyles({
  switchBase: {
    '&$checked': {
      '& + $track': {
        backgroundColor: 'var(--gasColor)',
      },
    },
  },
  checked: {},
  track: {},
})(SwitchBase) as React.FC<StyledSwitchProps>

interface StyledSwitchProps extends SwitchProps {
  fluidType?: FluidType
}

const StyledSwitch = ({ fluidType, ...props }: StyledSwitchProps) => {
  if (fluidType === undefined) {
    return <SwitchBase {...props} />
  }
  switch (fluidType) {
    case FluidType.ELECTRICITY:
      return <SwitchElec {...props} />
    case FluidType.WATER:
      return <SwitchWater {...props} />
    case FluidType.GAS:
      return <SwitchGas {...props} />
    default:
      return <SwitchBase {...props} />
  }
}

export default StyledSwitch