'How to resize a material-ui button

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>
reactjsbuttonmaterial-ui


Solution 1:[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:[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:[3]

Material UI 5.x.x

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

Solution 4:[4]

<Button
  fullWidth
  variant="outlined"
  startIcon={<CloudUploadIcon />}
  style={{ textTransform: "none", padding: "14px 0px" }} //button Size change in React Material Ui
  className={classes.btnFont}
  onClick={() => ref.current.click()}
>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mikhail Katrin
Solution 2 doublejosh
Solution 3 Sultan Aslam
Solution 4 Jakub Kurdziel

Related Questions