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

Question

I 'm working on a react typescript app and i try to import makeStyles from '@material-ui/core/styles' and it gets me error Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'. i installed these:

npm install @material-ui/core @material-ui/icons @types/material-ui

Answer 1

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/

Answer 2

This is how i solved it

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

Answer 3

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';

:)

Answer 4

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

Answer 5

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';

Answer 6

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

Answer 7

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