How to resize a material-ui button

Question

I have this code here :

I am trying to have 3 small square buttons with + and - sign and one in the middle with a digit. I am using material. The buttons now are rectangular and too big for my app. My problem is I just can't have them square and resize them. I have tried a lot of things but it doesn't work. Thanks

     <Grid item>
        <Button onClick={this.up} variant="outlined">
          <Add color="secondary" />
        </Button>
        <Button style={{ padding: "11px 0px" }} variant="outlined">
          {this.state.quantity < 1 ? 0 : this.state.quantity}
        </Button>
        <Button onClick={this.down} variant="outlined">
          <Remove color="secondary" />
        </Button>
      </Grid>

Solution 1

You could add max/min width/height style options.

For instance:

<Button style={{maxWidth: '30px', maxHeight: '30px', minWidth: '30px', minHeight: '30px'}}/>

In this case button always will look like a square and have a fix size (30px).

Solution 2

I assume you have a <Grid container> around the elements you posted. MUI Grids are designed to fill up the space and manage column widths. Seems like you probably need to restrict the outer <Grid container> to the total width you want the columns to span.

Also, note if you want to override all <Buttons>, do so in the theme...

createMuiTheme({
  overrides: {
    MuiButton: {
      outlined: {
        borderRadius: '0'
      }
    }
  }
})

Solution 3

Material UI 5.x.x

createTheme({
  components: {
    MuiButton: { 
      styleOverrides: { 
        root: { minWidth: 0 } 
      } 
    }
  }
})