ReactでMUI v5でスタイリングエンジンに`styled-components`を使用するための設定

TL;DR

1. 以下のコマンドを実行してMUIのコアライブラリである@mui/material、styled-componentsとラッパーライブラリである@mui/styled-engine-scをインストールします。

$ yarn add @mui/material @mui/styled-engine-sc styled-components

2. package.jsonで@mui/styled-engineが参照するスタイルエンジンの指定を@mui/styled-engine-scに変更します。

 {
   "dependencies": {
-    "@mui/styled-engine": "latest"
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  },
 }

詳細

1. @mui/material、styled-componentsとラッパーライブラリである@mui/styled-engine-scをインストールします。

yarn add @mui/material @mui/styled-engine-sc styled-components

ライブラリをインストールしただけの状態でビルドすると以下のエラーが発生してしまいます。

ERROR in ./node_modules/@mui/styled-engine/GlobalStyles/GlobalStyles.js 3:0-40
Module not found: Error: Can't resolve '@emotion/react' in '/app/node_modules/@mui/styled-engine/GlobalStyles'

ERROR in ./node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js 3:0-47
Module not found: Error: Can't resolve '@emotion/react' in '/app/node_modules/@mui/styled-engine/

ERROR in ./node_modules/@mui/styled-engine/index.js 6:0-39
Module not found: Error: Can't resolve '@emotion/styled' in '/app/node_modules/@mui/styled-engine'

ERROR in ./node_modules/@mui/styled-engine/index.js 26:0-62
Module not found: Error: Can't resolve '@emotion/react' in '/app/node_modules/@mui/styled-engine'

2. スタイリングエンジン変更の設定

リファレンスにも書いてある通りなのですがstyled-componentsをスタイリングエンジンに使用する場合はもう一手間加える必要があります。

MUIのコアライブラリである@mui/materialは内部で@mui/styled-engineに依存しているのですが、@mui/styled-engineのデフォルトの設定ではスタイリングエンジンにemotionが指定されているので、スタイルエンジンの指定を@mui/styled-engine-scに変更する様に設定します。

@mui/styled-engine-scは公式リファレンスのInstallationセクションに書いてあるようにyarn addコマンドでインストールするのではなくpackage.jsonを手書きで以下の様に書き換えてyarn installする必要があります。

 {
   "dependencies": {
-    "@mui/styled-engine": "latest"
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  },
 }

その他

❗ Warning: Using styled-components as an engine at this moment is not working when used in a SSR projects. The reason is that the babel-plugin-styled-components is not picking up correctly the usages of the styled() utility inside the @mui packages. For more details, take a look at this issue. We strongly recommend using emotion for SSR projects.

CSSの名前を動的に決定する仕組みの関係からSSRで使用する場合に正しく動作しないとの事で、SSRで使用したい場合はemotionをスタイリングエンジンに使用することを推奨しています。