Is there a way to remove the box-shadow on the thumb of the Switch button when it's disabled? I've tried various methods like adding the box-shadow in the switchBase and removing it from the thumb, but it affects the parent element as well. Another attempt was using box-sizing: none in the disabled part of switchBase but it doesn't override the thumb object. Could a ternary operator be used to determine what to return for 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.5 },
disabled: {},
},