Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'

I recently encountered this problem. This problem occurs when using the latest versions of Material UI. To solve you have to import makeStyles otherwise:

Old version : import { makeStyles } from '@material-ui/core'

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

For more informations : https://next.material-ui.com/guides/migration-v4/

This is how i solved it

npm install @mui/styles
import { makeStyles } from '@mui/styles';

I resolved the issue, The makeStyles JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/makeStyles instead. Make sure to add a ThemeProvider at the root of your application.

So in older versions makeStyles was import from '@material-ui/core/styles'

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

But in newer version import makeStyles from '@material-ui/core/styles'

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

:)

This may not be the best solution, but I solved it by downgrading the ui-material version in package.json :

"@material-ui/core": "^4.11.2", (was 5xxxbeta)
 "@material-ui/icons":"^4.11.2", ((was 5xxxbeta)

After: $ yarn install

If you are using version 5 of material ui, you need to import the below package;

1. @material-ui/lab
2. @material-ui/icons

Then import the makeStyles function from material ui

import { makeStyles } from '@mui/styles';

The same issue apply with createTheme. You will need to change from

import { createTheme } from '@material-ui/core/styles';
                         to
import { createTheme } from "@mui/material/styles";

especially when switching from v4 to v5

if it Stills doe not work try this!! this npm i @mui/styles --force import { makeStyles } from '@mui/styles';