I want to override the box-shadow on the thumb of the Switch button to be gone when it's disabled. Having it in the thumb object makes it appear whether it's disabled or not. I tried adding the box-shadow in the switchBase and removing from thumb, but it doesn't look right when I do it that way because it styles the parent as well, I also tried box-sizing: none in the disabled part of switchBase but it doesn't override thumb object. Is there a way to remove box-shadow when it's disabled, possibly a ternary for what to return in the thumb object?

MuiSwitch: {
  switchBase: {
    // thumb when unchecked
    color: "#F1F1F1",
    opacity: 1,
    "&$checked": {
      // thumb when checked
      color: MAIN,
      opacity: 1,
      // track when checked
      "& + $track": {
        backgroundColor: "#DDDDFA",
        opacity: 0.3,
      },
      "&$disabled": {
        color: "#BDBDBD",
        opacity: 0.8,
        "&$checked": {
          // thumb when checked and disabled
          color: MAIN,
          opacity: 0.6,
          // track when checked and disabled
          "& + $track": {
            backgroundColor: "#DDDDFA",
            opacity: 0.7,
          },
        },
      },
    },
  },
  thumb: {
    boxShadow:
      "0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24)"
  },
  checked: {},
  track: { backgroundColor: "#000", opacity: 0.24 },
  disabled: {},
},