CODEWITHSUNDEEP
reactjsmaterial-uijsxstyled-jsx
pauk
pauk

Reputation: 408

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>

Upvotes: 0

Views: 62

Answers (1)

G Sriram
G Sriram

Reputation: 555

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>

Upvotes: 1

Related Questions