How to properly import makeStyles in reactJS from material UI in 5 version?-CodePudding

I have tried using following imports :-

import { makeStyles } from '@material-ui/core/styles';

import makeStyles from '@mui/styles/makeStyles'; @material-ui/core/styles'

import makeStyles from '@material-ui/styles'

import {makeStyles} from "@mui/material"

import {makeStyles} from "@mui/styles"

import { makeStyles } from '@material-ui/core/styles'

import { makeStyles } from '@material-ui/styles';

none of these imports are working and I am getting error:-

MUI: makeStyles is no longer exported from @mui/material/styles.
You have to import it from @mui/styles.

How to correctly import makeStyle from material UI

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import { Toolbar, Divider, IconButton, Typography,  Badge} from "@mui/material"
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
import NotificationsActiveRoundedIcon from '@mui/icons-material/NotificationsActiveRounded';
import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';

const useStyles = makeStyles((theme)=>({
title: {
    flexGrow :1,
}
}))

const Header = () => {

    const classes=useStyles()
}

CodePudding user response：

I think you did not install the @mui/styles package, because this is a legacy solution, and it is not used in the @mui/material (deprecated from v5).

// with npm
npm install @mui/styles

// with yarn
yarn add @mui/styles