I'm trying to experiment with Material UI but running into problems with React v.18.2. I need to import the following:
import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'
But when I run npm install @material-ui/styles
, I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/styles
npm ERR! @material-ui/styles@"*" 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.
I have tried running the following, per this SO answer, and they did install but that has not helped any:
npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest
npm install @mui/icons-material@latest
Here are my dependencies.
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@fontsource/roboto": "^4.5.8",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.10.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-geolocated": "^4.0.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Bottom line: What do I need to do to be able to import what I need?
CodePudding user response:
You can try yarn.
yarn add @material-ui/styles
Also you can install it by using --force.
npm i -f @material-ui/styles
It worked for me
CodePudding user response:
You have dependency conflict (incorrect and potentially broken dependency) as it says, so try to run the command with --force
, or --legacy-peer-deps
.