[React] Material-UI (mui) theme.spacing(1) 단위 의미 + 픽셀

Intro

안녕하세요. 이번에 MUI 기반 회사 홈페이지 개발 업무를 지원하여 맡게 되었습니다. mui 를 사용하다보면 아래와 같은 소스코드를 많이 볼 수 있습니다. 

 

theme.spacing(1) 

 

처음에는 2px인가 싶었는데, 2px이 아니더라고요. 

 

theme.spacing(2) 의미 

Material-UI (mui) 에서 1은 theme.spacing(1)과 같은 의미를 갖습니다. 보통 theme.spacing()은 테마 설정에 따라 다르지만, 기본적으로 8px을 반환합니다.  1은 기본적으로 8px을 나타내며, 2는 16px, 3은 24px, ... 와 같이 8px 간격으로 증가합니다.

 

그렇다면 픽셀 커스텀이 불가능한가?

 

커스텀도 가능합니다. createTheme() 함수를 사용하여 수정할 수 있습니다. 상황에 맞춰서 사용하시면 됩니다 :)