푸르딩딩 MUI 벗어나기

MUI를 사용하면 대부분의 예제가 아주 푸르다.

이는 MUI의 primary 컬러가 파란색으로 지정되어 있기 때문인데, 문제는 우리 서비스의 파란색과 다른 파란색이라는 것이다. 따라서, MUI가 정해놓은 primary 컬러를 우리 서비스의 primary 컬러로 변경해야 하는데 이 방법을 알아보겠다.

가장 쉬운 방법

만약 mui에서 제공하는 버튼 하나의 배경색을 바꾸겠다고 생각하면, 다음과 같이 MUI에서 제공하는 sx 속성으로 배경색을 직접적으로 지정하는 방식이 있다. 이 방법은 평소 인라인으로 스타일을 변경하던 방법과 유사하다.

<Button sx={{ bgcolor: "#2a9461" }}>
  Button
</Button>

하지만 세상에 공짜가 없듯이 이 방법을 사용한다면 추후 동일한 색상을 많이 쓰는 상황에서 일일이 해당 색을 지정해줘야 하는 불편함이 있다.

MUI theme 사용하기

이런 상황을 고려하여 MUI에서는 ThemeProvider라는 것을 제공한다. 개발자가 자신의 테마를 만들고 ThemeProvider에게 전달하면, ThemeProvider가 테마를 override하게 해준다. 덕분에 개발자가 새로 지정한 테마들은 덮어씌워지고, 기존에 MUI에서 만들어 놓은 테마들은 그대로 사용이 가능하다.

테마 만들기

테마를 만들 때에는 createTheme을 사용한다.

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#2a9461"
    }
  }
});

앞선 예제에서 버튼에 지정했던 컬러를 primary 컬러에 지정해보았다.
palette는 색상을 만들 수 있는 부분으로, 이 외에도 typography 통해서 글씨에 대해, components를 통해 컴포넌트의 스타일링에 대해 등 다양한 기본 테마를 만들 수 있다.

테마 적용하기

import { ThemeProvider } from "@mui/material/styles";

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      // MUI components
    </ThemeProvider>
  );
}

ThemeProvider를 사용하여 원하는 컴포넌트를 감싸면 해당 컴포넌트에 내가 만든 테마가 적용이 된다.
App을 감싸면 프로젝트 전체에 반영이 된다.

이를 아까의 버튼 예제에 적용해보면,
원래는

<Button sx={{ color: (theme) => theme.palette.primary.main }}>
  Button
</Button>

의 간단하지 않은 코드를 사용해야 하지만, 값에 바로 접근할 수 있도록 하여 다음과 같이 간편하게 사용할 수 있다.

<Button sx={{ color: "primary.main" }}>Button</Button>

또는 color props를 사용할 수도 있다.

<Button color="primary">
  Button
</Button>

출처

Muhi Masri
MUI 공식 문서