MUI v4 から v5 にアップグレードする際に重点的に確認したい点

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
以前の記事では MUI v4 と v5 の変更点とアップグレードに役立つ codemods についてまとめました。
今回は実際に MUI v4 から v5 にアップグレードする際の作業手順と重点的に確認したい点について書いてみたいと思います。

MUIを4から5へアップグレードする

1. MUI v5 を導入する

MUI v5 は v4 とパッケージが異なるため、新たに導入を行う必要があります。

$ yarn add @mui/material @emotion/react @emotion/styled

2. import を差し替える

MUI v4 から import していたコンポーネントやスタイルシステム、ユーティリティ等を逐一 v5 に差し替える必要があります。
手動での置き換えはコストが掛かるので、codemods を使うのがお勧めです。

https://www.gaji.jp/blog/2022/07/12/10437/

3. スタイルの差分を確認する

主に以下の2つの観点からチェックします。

MUI 自体のコンポーネントアップデートによる差分の確認

Select など、 v4 と v5 でスタイルの変更が入っているコンポーネントがあります。
これを既存と同じになるようにスタイルを上書きするか、アップデートするかを選択する必要があります。
既存に合わせる場合は makeStyles や styled で上書きします。
他、スタイルの差分ではありませんが ListItem 等 v4 に存在していた props が v5 では非推奨になっているコンポーネントがあるため、それを修正する必要があります。

v4 と v5 の共存によるスタイル崩れの確認

重点的に見るべきポイントです。
MUI v5 と v4 のコンポーネントが同画面に共存しており、なおかつ makeStyles でスタイルを上書きしている際、CSSの詳細度が入れ替わり意図したスタイルが適用されないという問題があります。
この問題は v5 に完全移行する（同画面内に v4 と v5 の style 要素が同時に生成されることがない）と解消されます。

以上2つの観点からコンポーネントを一つ一つ確認していきます。
Storybook でコンポーネント開発をしている場合はまず全てのコンポーネントを v5 に移行した後 Storybook 上で全てのコンポーネントの差分を確認し、その後ローカルの画面の表示を確認していく方法で進めるのが効率的かと思います。
スタイルの差分を逐一確認するのは目視ではコストが高すぎるので、 Chromatic のような VRT テストを導入するのが良さそうです。

おわりに

今回は MUI v4 から v5 にアップグレードする際の作業手順について書きました。
MUI のアップグレードを行う際の参考にしていただけると幸いです。