CODEWITHSUNDEEP
reactjsmaterial-ui
Student22
Student22

Reputation: 2299

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

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!

Upvotes: 30

Views: 47373

Answers (5)

utkarsh nikam
utkarsh nikam

Reputation: 1

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

const Header = () => {
  return (
    <AppBar sx={{ color: "secondary", position: "fixed" }}>
      <Toolbar>
        <HeadsetTwoTone />
        <Typography sx={{ marginLeft: 2 }} variant="h6" component="h1">
          Apollo Music Share
        </Typography>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

you can use sx function for same

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 9961

Try with the following command:

npm i @mui/styles --save --force

Screenshot: enter image description here

Upvotes: 0

Abasaheb Gaware
Abasaheb Gaware

Reputation: 547

@mui/styles is not compatible with React.StrictMode or React 18

So now, you have two options:

  1. use @mui/system - sx props for styling (https://mui.com/system/getting-started/overview/)
  2. retry this command with --force, or --legacy-peer-deps

Upvotes: 3

Agrim Singh
Agrim Singh

Reputation: 519

The Material UI (MUI) does not work on React 18.

You have to downgrade your React to 17.

To downgrade React to 17, run npm install --save [email protected] and npm install --save [email protected]

This will work perfectly!

Upvotes: 4

Acid Coder
Acid Coder

Reputation: 2756

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)

Upvotes: 24

Related Questions