Material UI 시작하기

Material UI(MUI)는 구글의 디자인 프레임워크(Material Design)를 기준으로 하는 리액트 전용 UI 라이브러리다. 디자인 프레임워크는 간단히 말해서 하나의 표준으로 삼는 UI 스타일이라고 보면 된다.

MUI는 Material Design을 따라 input, button, select처럼 웹에 흔히 쓰이는 구성 요소들을 컴포넌트화했기 때문에, 커스터마이징에만 익숙해지면 빠르고 간편하게 어디에서나 통용되는 UI 컴포넌트를 활용할 수 있다.

 

MUI 컴포넌트를 내 사이트에 맞게 커스터마이징하는 방법은 다양한데, 그 중 커스텀 스타일을 개별적으로 적용하는 방법과 일괄로 적용하는 방법이 가장 보편적인 것으로 보인다.

 

sx prop 사용 (개별 적용)

각 MUI 컴포넌트에는 리액트 컴포넌트의 style prop과 동일하게 sx prop을 통해 스타일 객체를 전달할 수 있다. 컴포넌트를 개별적으로 수정할 필요가 있다면 sx prop으로 간편하게 원하는 스타일을 전달하면 된다.

 

MUI 컴포넌트는 여러가지 클래스명을 부여받는데, MUI의 스타일을 변경할 땐 필요에 따라 특정 클래스명에 대한 CSS도 따로 수정해줘야 한다. 예를 들어 아래처럼 <Checkbox /> 컴포넌트의 스타일을 커스터마이징할 때, sx prop으로 color만 바꾸면 체크박스의 테두리 색만 바뀐다.

<Checkbox
  sx={{
    color: "white",
  }}
/>

 

체크된 상태까지 테두리처럼 흰색으로 바꾸려면 .MuiSvgIcon-root이라는 클래스의 색을 지정해줘야 한다.

<Checkbox
  sx={{
    "& .MuiSvgIcon-root": { color: "white" },
  }}
/>

 

각 MUI 컴포넌트가 가지는 클래스명은 콘솔에서 직접 확인해봐야 하는 것 같다.

 

테마 사용 (일괄 적용)

MUI는 테마를 통해 모든 컴포넌트들의 style을 일괄로 적용할 수 있다. 자식 컴포넌트들이 테마를 따르도록 최상위 컴포넌트를 <ThemeProvider>로 래핑하고, theme prop으로 MUI 테마의 포맷을 따르는 객체를 전달한다.

import { createTheme, ThemeProvider } from "@mui/material";

// 테마
const theme = createTheme({
  palette: {
    primary: {
      main: "#ed5b3a",
    },
  },
  components: {
    MuiCheckbox: {
      styleOverrides: {
        root: {
          color: "white",
          "&.Mui-checked": {
            color: "white",
          },
        },
      },
    },
  },
});

// 최상위 컴포넌트
function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>...</div>
    </ThemeProvider>
  );
}

 

테마 객체에 쓰이는 모든 prop들은 MUI 공식 문서에서 확인할 수 있다.