[React] MUI Button과 IconButton 정사각형으로 만들기

 

1. IconButton

Code:

const iconButtonSides = 40;

//JSX
<IconButton
  sx={{
    width: iconButtonSides,
    height: iconButtonSides,
    borderRadius: 0,
    border: "1px solid",
    borderColor: "primary.main"
  }}

  aria-label="save"
>
  <Save sx={{ color: "primary.main" }} />
</IconButton>

 

Result: 

IconButton

 

 

 

2. Button

Code:

const buttonSides = 64;

//JSX
<Button
  aria-label="save"
  variant="contained"
  sx={{
    width: buttonSides,
    height: buttonSides,

    borderRadius: 0,
    border: "1px solid",
    borderColor: "primary.main",
    "& .MuiButton-startIcon": { margin: 0 }
  }}
  startIcon={<Save />}
></Button>

 

Result:

Button

 

 

 

 

 

참고 사이트

https://smartdevpreneur.com/how-to-make-square-buttons-and-iconbuttons-in-mui/