NPM dependency conflict between mui styles and react v18

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. 2. 3.

Current behavior 😯

I'm facing to a npm dependency conflict between mui styles packages and react. I used react v18 which higher peer recommend version to use @mui/styles in intallation guid `npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: employee-training-development@0.0.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.0" from @mui/styles@5.12.0 npm ERR! node_modules/@mui/styles npm ERR! @mui/styles@"^5.11.12" 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! npm ERR! For a full report see: npm ERR! C:\Users\isuru\AppData\Local\npm-cache_logs\2023-04-17T18_36_18_040Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: `

this is my package.json file { "name": "employee-training-development", "private": true, "version": "0.0.0", "type": "module", "scripts": { "start": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@fontsource/roboto": "^4.5.8", "@mui/icons-material": "^5.11.9", "@mui/material": "^5.11.10", "@mui/styled-engine-sc": "^5.11.11", "@mui/styles": "^5.11.12", "@mui/system": "^5.11.12", "@mui/x-data-grid": "^6.2.0", "@tanstack/react-query": "^4.26.1", "axios": "^1.3.4", "cloudinary-react": "^1.8.1", "echarts": "^5.4.2", "echarts-for-react": "^3.0.2", "jodit-react": "^1.3.36", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1", "styled-components": "^5.3.8" }, "devDependencies": { "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "@vitejs/plugin-react": "^3.1.0", "vite": "^4.1.0" } }

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

mui / material-ui