Cannot set padding to 0 on Material UI Button

user_2713836 0
Viewed 11874

I'm using a normal Button from Material-UI for React tried adding the following style

button: {
    display: 'inline-block',
    padding:0
  }

to this button

<Button className={classes.button}> I'm a Test Button </Button>

What I obtain is that the padding for the right/left side is correctly set to 0, while the one for top/bottom is not updated, see the attached image.

Is this a bug? Or what's the correct way to achieve this?

EDIT: Material-UI version: v1.0.0-beta.20

enter image description here

material-ui reactjs
2 Answers

This behavior is caused by the min-height and min-width properties of the root key of the Button element. Setting minHeight: 0 and/or minWidth:0 should fix it:

button: {
    display: 'inline-block',
    padding:0,
    minHeight: 0,
    minWidth: 0,
  }
user_14558380

This answer is more accurate than @Brunno

<Button sx={{ minHeight: 0, minWidth: 0, padding: 0 }}>My Button</Button>
user_71721890
Related