[MUI] <Button> 컴포넌트 width 줄이기, hover 시 배경, borderColor 변경

정사각형 버튼을 만들고 싶은데 width 조절이 안돼서 찾아보니

sx={{ minWidth: 'unset'} 을 사용하여 버튼의 기본 최소 너비를 제거했더니 해결됐다.

결과물

코드

   <Button
     variant="outlined"
     sx={{
       minWidth: 'unset',
       width: '40px',
       height: '40px',
       padding: 0,
       borderColor: '#4E5968',
       '&:hover': {
         borderColor: '#4E5968',
         backgroundColor: 'white',
        },
      }}

      <RemoveIcon
        sx={{ fontSize: '16px', color: '#4E5968' }}
      />
   </Button>

   <Button
     variant="outlined"
     sx={{
       minWidth: 'unset',
       width: '40px',
       height: '40px',
       padding: 0,
       borderColor: '#4E5968',
       '&:hover': {
         borderColor: '#4E5968',
         backgroundColor: 'white',
        },
      }}

       <AddIcon sx={{ fontSize: '16px', color: '#4E5968' }} />
     </Button>