I am working with a series of Material UI buttons that are defined as follows:
<Button className={classes.button}>Edit</Button>
<Button className={classes.button}>Duplicate</Button>
<hr />
<Button className={classes.button} color="secondary">
Remove
</Button>
To display them as blocks, I have assigned them a class like this:
button: {
display: 'block',
},
While they work correctly, I noticed that the smaller Edit button has extra padding compared to others because it contains less text:
https://i.sstatic.net/779Z8.png
By adding more text, the issue gets resolved:
https://i.sstatic.net/6XFCo.png
Is there a way to fix this by adjusting some settings?