Error when installing material ui in react - reactjs

Question

I am trying to use material ui core but I am getting an error when installing it with npm in a react and typescript application.
The command I used in the root of the project is:
npm install #mui/material #emotion/react #emotion/styled
Material UI website
The error I got is:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #mui/core#5.0.0-alpha.54
npm ERR! Found: #types/react#18.0.15
npm ERR! node_modules/#types/react
npm ERR! peerOptional #types/react#"^17.0.0 || ^18.0.0" from #mui/base#5.0.0-alpha.95
npm ERR! node_modules/#mui/base
npm ERR! #mui/base#"5.0.0-alpha.95" from #mui/material#5.10.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.10.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! peerOptional #types/react#"^17.0.0 || ^18.0.0" from #mui/icons-material#5.10.3
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"^5.10.3" from the root project
npm ERR! 9 more (#mui/private-theming, #mui/system, #mui/types, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional #types/react#"^16.8.6 || ^17.0.0" from #mui/core#5.0.0-alpha.54
npm ERR! node_modules/#mui/core
npm ERR! #mui/core#"^5.0.0-alpha.54" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #types/react#17.0.49
npm ERR! node_modules/#types/react
npm ERR! peerOptional #types/react#"^16.8.6 || ^17.0.0" from #mui/core#5.0.0-alpha.54
npm ERR! node_modules/#mui/core
npm ERR! #mui/core#"^5.0.0-alpha.54" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/username/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/username/.npm/_logs/2022-09--debug-0.log
user#User'sPC projectName % npm install #mui/material #emotion/react #emotion/styled
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #mui/core#5.0.0-alpha.54
npm ERR! Found: #types/react#18.0.15
npm ERR! node_modules/#types/react
npm ERR! peerOptional #types/react#"^17.0.0 || ^18.0.0" from #mui/base#5.0.0-alpha.95
npm ERR! node_modules/#mui/base
npm ERR! #mui/base#"5.0.0-alpha.95" from #mui/material#5.10.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.10.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! peerOptional #types/react#"^17.0.0 || ^18.0.0" from #mui/icons-material#5.10.3
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"^5.10.3" from the root project
npm ERR! 9 more (#mui/private-theming, #mui/system, #mui/types, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional #types/react#"^16.8.6 || ^17.0.0" from #mui/core#5.0.0-alpha.54
npm ERR! node_modules/#mui/core
npm ERR! #mui/core#"^5.0.0-alpha.54" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #types/react#17.0.49
npm ERR! node_modules/#types/react
npm ERR! peerOptional #types/react#"^16.8.6 || ^17.0.0" from #mui/core#5.0.0-alpha.54
npm ERR! node_modules/#mui/core
npm ERR! #mui/core#"^5.0.0-alpha.54" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/username/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/username/.npm/_logs/2022-09-debug-0.log
My relevant package.json is:
"dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#mui/core": "^5.0.0-alpha.54",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.3",
"#mui/styled-engine-sc": "^5.10.3",
},
I removed the #mui/core dependency and then tried the command: npm i --save #mui/core as suggested by the answer in the comment, however I got the following error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving:projectname#0.1.0
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.2" from #mui/core#5.0.0-alpha.54
npm ERR! node_modules/#mui/core
npm ERR! #mui/core#"^5.0.0-alpha.54" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/username/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/username/.npm/_logs/2022-09--debug-0.log
I have no idea what this error means so would appreciate any help thanks!

Answer 1

Run these command
npm config set legacy-peer-deps true
npm i --save #mui/core
npm i #mui/styles