Regardless of what px value do I choose, nothing happens. The only times when something is altered is when I adjust either the paddingLeft or the paddingRight parameter, but here, another peculiar thing happens since if I try to set both paddings nothing happens, therefore the trick works only when setting just one sort of padding.
<Button
variant='secondary'
sx={{
fontSize: '0.9rem',
fontWeight: 500,
m: '1rem',
px: '0.1rem',//nothing happens
outline: 'none',
'&:focus': {
outline: 'none',
},
}}
>
enable notifications
</Button>
This is because Material UI by default sets a min-width to a button. If you would like to get rid of the x padding and shrink it, do the following:
<Button
variant='secondary'
sx={{
minWidth: 0,
maxWidth: 'fit-content',
fontSize: '0.9rem',
fontWeight: 500,
m: '1rem',
px: '0.1rem',//nothing happens
outline: 'none',
'&:focus': {
outline: 'none',
},
}}
>
enable notifications
</Button>