I need a compact Switch component without any additional dimensions or spacing
Check out this custom Switch component
<Switch
checked={isSubscriptionStatusActive}
onChange={onHandleChangeSubscriptionStatus}
disabled={subscriptionStatus === 'deactive'}
aria-label="subscribption-status"
classes={{
root: classes.root,
bar: classes.bar,
}}
>
Here are the CSS styles applied to it
let style = {
root: {
display: 'inline-flex',
width: 0,
position: 'relative',
flexShrink: 0,
},
bar: {
borderRadius: 7,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
marginTop: -7,
left: '50%',
marginLeft: 0,
},
};
Steps for Reproducing Bugs
https://codesandbox.io/s/x2wom4pm9z
https://codesandbox.io/embed/x2wom4pm9z
Submit issues related to Material UI here https://github.com/mui-org/material-ui/issues/9587