[MUI] material ui, emotion으로 global style 설정하기

React에서 material ui (MUI) 을 설치했다면 emotion도 함께 설치했을 것이다.

이 글에서는 MUI와 emotion을 이용해 다음의 글로벌 스타일을 설정하는 방법을 알아 볼 것이다.

1. reset css
2. 전역 폰트 설정
3. MUI 팔레트 색상 등 설정 커스텀

 

1. reset css 설정하기 - CssBaseline

MUI에서 CssBaseline 컴포넌트를 불러와 넣어주는 것만으로 간단하게 reset css 설정을 할 수 있다.

index.tsx

<App />과 같은 레벨이나 상위 레벨에 넣어주기만 하면 reset css 설정은 끝이다.

import { CssBaseline, ThemeProvider } from '@mui/material';
import { Global } from '@emotion/react';
import { globalTheme } from './styles/globalTheme';
import { globalStyle } from './styles/globalStyle';

//...
root.render(
  <BrowserRouter>
    <CssBaseline />
    <App />
  </BrowserRouter>
);

 

보통의 reset css처럼 완벽하게 a태그의 색깔과 밑줄을 지워준다거나, li의 bullet을 없애준다거나 하는 정도까지는 아니고,

아무것도 설정하지 않은 폰트의 사이즈를 1rem로, 기본 font-family를 "Roboto", "Helvetica" 등으로 설정, box-sizing을 border-box로 바꿔주는 정도이다.

MUI 스타일링에 적합하도록 최적화해주는 용도라고 생각하면 된다.

 

라우터를 설정하지 않았을 때도 마찬가지로 App과 같은 레벨에 넣어주면 된다.

return (
    <React.Fragment>
      <CssBaseline />
      <App />
    </React.Fragment>
);

 

2. 전역 폰트 설정

src/styles 폴더 아래에 다음과 같이 파일 두 개를 생성하자.

• globalStyle - 폰트를 import해오는 css 코드 작성하는 용도
• globalTheme - 해당 폰트를 전역 테마로 사용할 것이라고 선언할  파일

만약 Typescript가 아니라 js만 사용할 것이라면 확장자를 js로 하면 된다.

 

index.tsx

import { CssBaseline, ThemeProvider } from '@mui/material';
import { Global } from '@emotion/react';
import { globalTheme } from './styles/globalTheme';
import { globalStyle } from './styles/globalStyle';

//...
root.render(
  <BrowserRouter>
    <ThemeProvider theme={globalTheme}>
      <Global styles={globalStyle} />
      <CssBaseline />
      <App />
    </ThemeProvider>
  </BrowserRouter>
);

 

여기서 Global은 emotion에서 global styles를 설정할 때 사용하는 컴포넌트이다.

왜 globalTheme이 있는데 이게 추가로 필요하냐 하면, createTheme으로 생성한 테마 객체에서는 font를 import 해오는 등의 css 코드를 작성할 수 없기 때문이다.

globalTheme = 무엇을 사용할 거라고 선언하는 용도, globalStyle = css 코드 불러오는 용도라고 생각하면 된다.

 

2-1. 폰트 import 해오기

globalStyle.ts

export const globalStyle = `
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
`;

예시는 나눔고딕인데, 구글 폰트로부터 import해오는 css 코드를 객체에 문자열로 담아 내보낸다.

 

❗ CDN 방식이 아니라 저장된 폰트 파일을 불러오고 싶을 때

public 아래의 fonts 폴더에 다운받은 폰트를 저장하고, @font-face로 폰트를 불러오면 된다.

const globalStyle = `
    @font-face {
      font-family: 'Noto Sans Korean';
      font-style: normal;
      font-weight: 100;
      src: local('Noto Sans Korean Thin'), local('NotoSansKR-Thin'),
        url('/fonts/NotoSansKR-Thin.otf') format('opentype');
    }

    @font-face {
      font-family: 'Noto Sans Korean';
      font-style: normal;
      font-weight: 300;
      src: local('Noto Sans Korean Light'), local('NotoSansKR-Light'),
        url('/fonts/NotoSansKR-Light.otf') format('opentype');
    }
    
    // ...
`

 

2-3. 폰트 사용할 것이라고 선언해주기

ThemeProvider에 내려줄 테마를 createTheme으로 생성하고, 웹사이트 전체에서 사용할 폰트 패밀리를 선언해준다.

globalTheme.ts

import { createTheme } from '@mui/material';

export const globalTheme = createTheme({
  typography: {
    fontFamily: 'Nanum Gothic, Roboto, Helvetica, Arial, sans-serif',
  }
});

 

여기서의 typography는 MUI의 <Typography /> 컴포넌트와는 직접적인 상관이 없는 속성이다.

정확하게 말하자면, <Typography/>에도 영향을 줄 수는 있겠으나, 웹사이트 전체의 폰트에 적용되는 속성이다.

 

3. 팔레트 색상 커스텀하기

전역 theme에서 MUI에 기본적으로 설정되어 있는 primary 컬러 같은 사항을 커스텀하는 것도 가능하다.

나는 primary, secondary 컬러들을 우리 프로젝트에서 자주 사용될 테마 색상들로 교체해주었다.

globalTheme.ts

import { createTheme } from '@mui/material';

export const globalTheme = createTheme({
  typography: {
    fontFamily: 'Nanum Gothic, Roboto, Helvetica, Arial, sans-serif',
  },
  palette: {
    primary: {
      main: '#78A2FF', // 파란색
    },
    secondary: {
      main: '#FF9B3F', // 주황색
    },
  },
});

 

+) Chat GPT 적극 이용하기

 

아래는 내가 chat gpt의 도움을 받아, 로컬에 저장된 폰트를 import하는 코드를 받아낸 결과이다.

여러 개의 font-weight가 있는 폰트 같은 경우 그 파일들을 일일이 import하는 코드를 작성하는 것은 너무 힘든 일이다.

 

chatgpt에게 import 예시와 함께 폰트의 저장 위치, 필요한 weight를 전달하면 결과를 만들어주는데 복사 붙여넣기만 하면 되니 편리하다.

 

그리고 MUI에서 기본 테마 중 일부분을 커스텀하고 싶은데 공식 사이트에 자세한 설명이 없을 때가 있는데,

chatgpt 에게 물어보면 방법을 알려줄 때가 많다.

 

공식 문서가 너무 방대하거나 예시가 별로 없을 때는 chatgpt를 마구 괴롭히면 항상 정확한 건 아니지만 금방 답이 나와서 좋은 것 같다.