Struggling to resize a Material-UI Switch as the default size isn't suitable. Managed to increase the size, but now the behavior isn't ideal.
It looks fine in its default state:
https://i.sstatic.net/qLpDZ.png.
However, when changing its state, it loses style:
https://i.sstatic.net/QL0of.png.
Unable to figure out how to alter the styles so the Thumb goes all the way to the right of the Track.
<Switch
onChange={setPrivateSwap}
classes={{
root: classes.root,
switchBase: classes.switchBase,
checked: classes.checked,
track: classes.track,
thumb: classes.thumb,
}}
/>
const useStyles = makeStyles({
root: {
width: '90px',
height: '50px',
padding: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
track: {
width: '40px',
height: '20px',
borderRadius: '10px',
},
switchBase: {
'&$checked': {
color: '#007D81',
},
'&$checked + $track': {
backgroundColor: 'rgba(0,125,129,0.3)',
},
},
checked: {},
thumb: {
width: '32px',
height: '32px',
},
});