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>

Erastus

Answer 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).

Nutty

For me the edges of the button are still round – Intellectualism

Having a similar issue and the above proposed solution is not working. – Shillyshally

Wow - this actually works! Why is it that setting both maxWidth and minWidth will cause the box to adjust, but it does not respond to 'width'? – Inwardly

Answer 2

Material UI 5.x.x

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

Vespertine

Answer 3

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'
      }
    }
  }
})

Fic

Please provide more context in the code. It would be helpful to see where createMuiTheme is used – Inwardly

Answer 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()}
>

Soloman

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Dallas

Answer 5

The two styles impacting the width of a MUI button are min-width and padding. These come from the class MuiButton-root. If you want to edit all buttons, the above solution from Sultan Aslam should work.

But to just edit some buttons in your app, attempts to override these may not work if you apply the styles directly in the <Button> via style or sx, even with !important. Because of specificity, you have to apply the styles as a class. You can do it like so:

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  customIconButton: {
    minWidth: "10px",
    padding: "5px"
  },
});

In your React component:

const classes = useStyles();

Then, in your button, add

className={classes.customIconButton}

(For elements of components, it gets more complex: https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles )

Demodulation

Answer 6

import React from 'react';
import { Grid, Button, makeStyles } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';

const useStyles = makeStyles((theme) => ({
  button: {
    width: 40, // Adjust the width of the buttons as needed
    height: 40, // Adjust the height of the buttons as needed
    borderRadius: '50%', // Make the buttons circular
    minWidth: 0, // Remove minimum width to allow the button to shrink
    padding: 0, // Remove padding to make the buttons smaller
    margin: '0 5px', // Adjust the margin between buttons as needed
  },
}));

class MyComponent extends React.Component {
  state = {
    quantity: 0,
  };

  up = () => {
    this.setState((prevState) => ({
      quantity: prevState.quantity + 1,
    }));
  };

  down = () => {
    this.setState((prevState) => ({
      quantity: Math.max(prevState.quantity - 1, 0),
    }));
  };

  render() {
    const classes = useStyles();

    return (
      <Grid container alignItems="center" justifyContent="center">
        <Grid item>
          <Button className={classes.button} onClick={this.up} variant="outlined">
            <AddIcon />
          </Button>
        </Grid>
        <Grid item>
          <Button className={classes.button} variant="outlined">
            {this.state.quantity}
          </Button>
        </Grid>
        <Grid item>
          <Button className={classes.button} onClick={this.down} variant="outlined">
            <RemoveIcon />
          </Button>
        </Grid>
      </Grid>
    );
  }
}

export default MyComponent;

Soloman

Welcome back! Unfortunately, there are three issues with this answer. (1) First, and most important, please keep in mind that use of AI Tools (e.g., ChatGPT) to generate or reword content that you post is not permitted on Stack Overflow, even if you've validated this content. Also see the related Help on this topic. (2) There wasn't any reason to post a completely new answer here. Next time, consider editing your existing answer to improve it. – Facetious

(3) As was commented on your previous answer, you should explain your answers rather than just post code. – Facetious