./src/components/styles.js Attempted import error: '@material-ui/core/styles' does not contain a default export (imported as 'makeStyles')

Question

I get

./src/components/styles.js Attempted import error: '@material-ui/core/styles' does not contain a default export (imported as 'makeStyles').

when I try to run my react app. How would I resolve this?

Here are the contents of styles.js for reference:

import makeStyles from "@material-ui/core/styles";

export default makeStyles(()=>({ ul:{ justifyContent: "space-around", }, }));

Answer 1

You need to use a named import like this:

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

or a default import like so,

import makeStyles from "@material-ui/core/styles/makeStyles"

You're in the middle of the two.

https://material-ui.com/guides/minimizing-bundle-size/#development-environment is good to read up on.