viteで作成したプロジェクトでmuiをinstallすると、"ERESOLVE unable to resolve dependency tree"

起きた現象

npm create vite@latest react-sample
で生成したプロジェクトで、MUIをインストールすると依存関係のエラーが発生した

$ npm install @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-material
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: react@18.3.1
npm error node_modules/react
npm error   peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/material@6.3.0
npm error   node_modules/@mui/material
npm error     @mui/material@"*" from the root project
npm error   peer react@">=16.8.0" from @emotion/react@11.14.0
npm error   node_modules/@emotion/react
npm error     @emotion/react@"*" from the root project
npm error     peerOptional @emotion/react@"^11.5.0" from @mui/material@6.3.0
npm error     node_modules/@mui/material
npm error       @mui/material@"*" from the root project
npm error     2 more (@emotion/styled, @pigment-css/react)
npm error   2 more (@emotion/styled, @pigment-css/react)
npm error
npm error Could not resolve dependency:
npm error peer react@"^19.0.0" from react-dom@19.0.0
npm error node_modules/react-dom
npm error   peer react-dom@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/material@6.3.0
npm error   node_modules/@mui/material
npm error     @mui/material@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/shun/.npm/_logs/2025-01-01T08_32_36_598Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/shun/.npm/_logs/2025-01-01T08_32_36_598Z-debug-0.log

原因

ログに書いてある通り
Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps
なので、
　・依存関係を解決する
　または
　・--legacy-peer-depsをつけて無理やりインストールする
ことが必要
後者は不安なので前者でいく

依存関係の不整合は
peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/material@6.3.0
reactのバージョンがあってないようだ
（公式ページでも
https://mui.com/material-ui/getting-started/installation/
　で注意書きあり）

対応

package.jsonの編集

19.0.0にしてしまう

  "dependencies": {
    ...
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
    ...
  },
  "devDependencies": {
    ...
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    ...
  }

インストール

インストールされているパッケージをいったん消して再インストール

rm -rf ./node_modules/
rm package-lock.json
npm install

備考

viteで自動生成したプロジェクトのpackage.jsonの一部をユーザーが書き換えてもいいものだろうか。。