React :: MUI v4 에서 v5로 버전 업그레이드 하기 (+styled-components) - 2/2

MUI v4에서 v5로 버전 업그레이드 하면서 주의할점!

 

1. styled-components 사용하는 경우

app.jsx

import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { ThemeProvider as MuiThemeProvider, CssBaseline } from "@mui/material";
import { StylesProvider } from "@mui/styles";

  <StylesProvider injectFirst>
      <StyledThemeProvider theme={theme}>
        <MuiThemeProvider theme={theme}>
          <GlobalStyle />
          <CssBaseline />
          <Routers />
        </MuiThemeProvider>
      </StyledThemeProvider>
  </StylesProvider>

styled-components와 MUI에서 제공하는 ThemeProvider를 import 해오는 경로 수정이 선행되어야 한다
(경로 수정 후 에러창 마주할텐데 이건 당연한 것입니다,,,)

 

2. App.jsx에서 import 경로 수정 후 에러 해결하기

일단 먼저 useTheme을 사용하는 곳을 찾아 import 경로를 변경하자!

import { useTheme } from "@material-ui/styles"; // 변경전
import { useTheme } from "@mui/material"; // 변경후

일단 여기까지만 수정해도 화면은 뜬다~ (theme 컬러나 mui 컴포넌트는 엉망진창일수도 있음)

 

3. @material-ui/* 의존성 제거하기

Provider를 5버전에서 import 해왔는데 컴포넌트는 4버전에서 import 해왔다면
theme 컬러가 제대로 적용되지 않기 때문에 컬러가 엉망진창으로 보일 수 있다
그러므로 ctrl + F로 @material-ui를 검색한다음 @mui/*로 경로를 변경해주는 작업이 필요하다

그 전에 createTheme이 사용되었다면 이 부분 부터 먼저 수정한 후 컴포넌트 버전 업그레이드를 진행하자!
(그래야 교체가 잘 되고 있는지 확인이 가능하다)

import { createTheme } from "@material-ui/core/styles"; // 변경전
import { createTheme } from "@mui/material/styles"; // 변경후