[MUI] 프로젝트에 MUI 적용하기

개요

• 프로젝트에 필요한 UI 요소를 빠르게 구축하기위한 라이브러리로 React와의 호환성이 지원되는 MUI를 사용하여 생산성을 향상시키기 위함.

Install

• npm 혹은 yarn을 사용하여 필요한 패키지 설치

npm install @mui/material @emotion/react @emotion/styled

or 

yarn add @mui/material @emotion/react @emotion/styled

• MUI Icon을 위한 패키지도 설치

npm install @mui/icons-material

Example

• MUI의 Button은 variant를 통해 색상을 조절할 수 있다. 이는 palette를 통해 customizing이 가능하다. 또한, button을 기반으로 만들어졌기때문에 onClick, href도 가능하다.

import Button from "@mui/material/Button";

const NavTemplate = (): JSX.Element => {
  return <Button variant="contained"> MUI Button</Button>;
};

export default NavTemplate;

참고

• https://mui.com/material-ui/getting-started