Looking to customize the styles of a Material UI Switch for the small variation? I have applied global styles but now want to override the styles of elements like track and thumb. Targeting the root element with the sizeSmall class is working, but unsure of the correct approach to modifying inner elements.
Should I use something like & $sizeSmall within track or vice versa?
Check out the code sandbox: https://codesandbox.io/s/material-demo-forked-vkdsh?file=/theme.js
Here's the relevant theme override:
MuiSwitch: {
root: {
width: 96,
height: 40,
padding: 0,
margin: 8,
borderRadius: 48,
boxShadow:
"inset -3px -3px 7px #FFFFFF, inset 3px 3px 7px rgba(156, 156, 156, 0.48);"
},
sizeSmall: {
width: 60,
height: 18,
borderRadius: 9,
padding: 0
},
switchBase: {
marginTop: 7,
marginLeft: 12,
padding: 1,
"&$checked, &$colorPrimary$checked, &$colorSecondary$checked": {
transform: "translateX(46px)",
color: "#fff",
"& + $track": {
opacity: 1,
border: "none",
background:
"linear-gradient(172.54deg, #2B8CFF -34.02%, #0354CE 124.23%);"
}
}
},
thumb: {
width: 24,
height: 24,
boxShadow:
"2px 1px 8px rgba(185, 185, 185, 0.3), inset 0px -1px 1px rgba(95, 95, 95, 0.4);"
},
track: {
margin: "auto 16px",
height: 8,
borderRadius: 9,
border: "1px solid #D3D4D5",
backgroundColor: "#fafafa",
opacity: 1,
transition:
"background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
}
},