React 18でMaterial-UIをインストールする方法

バージョン互換性の問題

React 18を使用している場合、@material-ui/core（Material-UI v4）は互換性がありません。代わりに@mui/material（Material-UI v5）をインストールする必要があります。

問題の原因

React 18プロジェクトで@material-ui/coreをインストールしようとすると、以下のエラーが発生します：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: react@18.0.0
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.3

このエラーは、Material-UI v4がReact 16.xや17.xのみをサポートしており、React 18.xとの互換性がないため発生します。

解決方法

推奨ソリューション：Material-UI v5にアップグレード

React 18にはMaterial-UIの最新バージョン（v5）を使用してください：

npm

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

yarn

yarn add @mui/material @emotion/react @emotion/styled
yarn add @mui/icons-material

インポートの変更

Material-UI v5ではインポートパスが変更されています：

// v4（非推奨）
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import SendIcon from '@material-ui/icons/Send';

// v5（推奨）
import { makeStyles } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import SendIcon from '@mui/icons-material/Send';

代替ソリューション（非推奨）

--legacy-peer-depsフラグの使用

一時的な解決策として--legacy-peer-depsフラグを使用できますが、これは推奨されません：

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

注意

この方法は依存関係の競合を無視するため、予期しない動作が発生する可能性があります。本番環境では避けてください。

Reactのダウングレード

既存のプロジェクトでのみ考慮すべき方法：

npm install react@^17.0.0 react-dom@^17.0.0 --force

パッケージ設定の上書き

package.jsonで依存関係を明示的に設定することもできます：

{
  "dependencies": {
    "@mui/icons-material": "^5.14.13",
    "@mui/material": "^5.14.13",
    "@mui/styles": "^5.14.13",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "overrides": {
    "@mui/styles": {
      "react": ">=18.2.0",
      "react-dom": ">=18.2.0"
    }
  }
}

まとめ

シナリオ	推奨アクション
新規プロジェクト	Material-UI v5を使用
既存プロジェクトのアップグレード	React 18に合わせてMaterial-UI v5に移行
一時的な解決	--legacy-peer-depsフラグ（非推奨）

Material-UI v5はReact 18を完全にサポートしており、最新の機能とパフォーマンス改善が含まれています。公式ドキュメントMUI公式サイトで詳細な情報を確認してください。