MUI - Box

Mui에서 지원하는 css-in-js인 Box를 알아보자.

 

Box는 곧 style이다.

실제로 하는 역할이 같다.

 

 

import Box from '@mui/material/Box';

<Box sx={{}}></Box>
<div sx={{}}></div>

기존 JSX 문법에 따라서 스타일을 적용하는 방법 또한 같다.

하지만 mui의 스타일 가이드를 따라서 사이트의 ui를 구축하는 것이니까 div 보다는 Box(component)를 사용하는 것이 좋겠다.

 

import Box from '@mui/material/Box';

<Box>
 	<ReviewField
	  onSubmit={e => e.preventDefault()}
      label="배우 이름"
    />
  </Box>