NPM install of @mui/styles is not working for React 18

Question

I'm trying to install Material-UI Styles to a React project, but whenever I run this command in the terminal:

npm i @mui/styles

It reads the following message:

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.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"*" from the root project

And here's the code in React:

import { HeadsetTwoTone } from "@mui/icons-material";
import { AppBar, Toolbar, Typography } from "@mui/material";
import React from "react";
import { makeStyles } from "@mui/styles"

const useStyles = makeStyles(theme => ({
    title: {
        marginLeft: theme.spacing(2)
    }
}))

const Header = () => {
    const classes = useStyles();

    return (
        <AppBar color="secondary" position="fixed">
            <Toolbar>
                <HeadsetTwoTone />
                <Typography className={classes.title} variant="h6" component="h1">
                    Apollo Music Share
                </Typography>
            </Toolbar>
        </AppBar>
    )
}

export default Header;

Unfortunately, the code doesn't work because the package doesn't exist and it won't install. I searched on the web for a solution, but nothing seems to be working at this point.

Would anyone know how to get this going?

Thanks a lot!

Answer 1

npm i @mui/styles --force

it needs a different version of React, but actually it is fine to use React 18 (never actually tested it, but speaking from my experience with other packages that have the similar issue)