运行React项目报错@material-ui/core/styles无默认导出makeStyles如何解决

错误原因 #

该导入报错由 Material UI 版本和导入语法不匹配导致：

• Material UI v4 版本中 makeStyles 为默认导出，你当前的导入写法适配v4版本
• Material UI v5 及以上版本中，makeStyles 调整为命名导出，且被标记为废弃，官方推荐使用新版样式方案

修复方法 #

快速修复 #

直接修改styles.js文件的导入语句，将默认导入改为命名导入即可：

// 用花括号包裹 makeStyles 改为命名导入
import { makeStyles } from "@material-ui/core/styles";

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

如果修改后仍有报错，说明你使用的是 v5 及以上的新版本，makeStyles 已迁移到独立包中，执行以下命令安装对应依赖：
npm install @mui/styles @emotion/react @emotion/styled
安装完成后将导入路径修改为：
import { makeStyles } from '@mui/styles'

长期适配方案（推荐） #

v5 版本官方不再推荐使用 makeStyles，可以改用官方推荐的 styled 组件或者 sx 属性实现样式，示例如下：

import { styled } from '@mui/material/styles';
import List from '@mui/material/List';

const StyledList = styled(List)(() => ({
  justifyContent: "space-around",
}));

// 业务组件中直接使用 <StyledList /> 替代原有ul/List组件即可

内容的提问来源于stack exchange，提问作者Brendan Mai