reactjsmaterial-uijsxstyled-jsx

Material UI button's padding can't be adjusted


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>

Solution

  • 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>