뚝딱 뚝딱 MUI 시작하기

프로젝트를 하면서 MUI를 사용하기로 했다. MUI는 예쁜 스타일을 쉽게 사용할 수 있는 리액트 UI 라이브러리이다. 버튼 등 자주 쓰는 것들이 컴포넌트로 제공해주고, 다크 모드, 테마 관리 등도 할 수 있다.

아, MUI는 전에는 Material-UI와 같은 것이다. 작년에 버전 5로 업데이트되면서 이름도 MUI로 바뀌었다고 한다.(이건 개발자 경험을 위해서라고 한다!)

이전과 비교해서 버전 5에서 뭐가 바뀌었는지 궁금하다면 이 블로그(https://hoontae24.github.io/19)를 보면 좋을 것 같다.

mui 설치하기

npm install @mui/material @emotion/react @emotion/styled 로 라이브러리를 설치한다.

일관된 스타일로 CSS 정리하기

브라우저 상관 없이 일관된 스타일을 적용하기 위해서 <CssBaseline /> 를 최상단 컴포넌트에 추가할 수 있다.

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}

(이 코드는 아래 공식 홈페이지에 있는 걸 가져왔다. 더 자세한 건 아래 홈페이지를 보세용)

https://mui.com/material-ui/react-css-baseline/

 

MUI 컴포넌트 사용하기

MUI는 버튼, 알럿 등 여러 컴포넌트를 제공한다.

좀 더 속성을 바꾸고 싶은 경우에 어떤 속성이 있는지, 어떤 값으로 채워넣으면 되는지는 그 컴포넌트에 관한 api 를 보면 된다. 예를 들어서 색깔, 디자인, 사이즈 등을 바꿀 수 있을 수도 있다.

공식 문서에서 필요한 컴포넌트를 찾아서, 예시를 참고해서 사용하면 된다!

React Autocomplete component - Material UI

 

스타일링하기

1. emotion을 활용해서 MUI 컴포넌트, HTML 요소를 스타일링할 수 있다.

import React from "react";
import { styled } from "@mui/system"; // styled 임포트하기
import { Button } from "@mui/material"; // 사용할 MUI 컴포넌트 가져오기

 // mui 컴포넌트에 스타일 추가하기
const MyButton = styled(Button)({  
  background: "pink",
  border: "red 1px solid",
});

// html 요소에 스타일 추가하기
const MyList = styled("li")({
  color: "pink",
  background: "black",
});

function Nav() {
  return (
    <>
      <ol>
        <MyList>html</MyList>
        <MyList>css</MyList>
        <MyList>js</MyList>
      </ol>
      <MyButton>버튼</MyButton>
    </>
  );
}

export default Nav;

styled() - MUI

2. 한번만 스타일링하는 경우에는 sx를 사용할 수 있다.

 import React from "react";
 import { styled } from "@mui/system"; // styled 임포트하기
 import { Button } from "@mui/material"; // 사용할 MUI 컴포넌트 가져오기

 function Nav() {
   return (
     <>
       // 스타일을 한번만 사용하는 경우 sx를 이용할 수 있음
       <Button sx={{ background: "pink", border: "red 1px solid" }}>
         버튼2
       </Button>
     </>
   );
 }

 export default Nav;

2-1. MUI 컴포넌트들은 sx 프롭을 가진다.

2-2. 일반 HTML 요소의 경우, 아래와 같이 커스텀 컴포넌트로 만든 후 sx 프롭을 사용할 수 있다.

import { styled } from '@mui/material/styles';

const Div = styled('div')({});