MUI报错makeStyles未从@mui/material/styles导出 引入@mui/styles仍无效

报错根因 #

MUI v5 及以上版本已经将makeStyles从@mui/material/styles中完全移除，该API被迁移到独立的@mui/styles包中，报错本质是代码中还存在指向旧路径的makeStyles引用。

你已经调整了自身业务代码的引入路径但问题仍存在，可按以下步骤逐一排查解决：

• 第一步：确认已经安装@mui/styles依赖
  该包不会随@mui/material默认安装，需要手动执行安装命令：

# npm 安装
npm install @mui/styles
# yarn 安装
yarn add @mui/styles

• 第二步：排查所有遗漏的旧路径引用
  全局搜索项目所有业务代码中是否还存在未修改的旧引入语句：
  import { makeStyles } from '@mui/material/styles'
  确认所有引用都已经替换为：
  import { makeStyles } from '@mui/styles'

• 第三步：排查第三方依赖的引用问题
  如果自身业务代码已经全部修改完成仍出现报错，说明项目中安装的某个第三方MUI生态组件仍在使用旧路径引入makeStyles，可通过打包配置路径重定向解决该问题：

以Vite为例，在vite.config.js的resolve.alias配置中添加以下规则即可：

export default defineConfig({
  resolve: {
    alias: {
      '@mui/material/styles': '@mui/styles',
    },
  },
})

如果使用Webpack，在webpack.config.js中添加对应alias规则即可。

• 第四步：清理缓存重新启动
  删除node_modules的同时，也要删除项目根目录下的package-lock.json/yarn.lock文件，以及打包工具的缓存目录（比如Vite的node_modules/.vite、Webpack的.cache目录，之后重新安装依赖，重启开发服务即可。

可选优化方案 #

@mui/styles是MUI v5的遗留兼容方案，官方更推荐使用styled API 或者sx属性实现样式自定义，可完全避免此类路径兼容问题。

内容的提问来源于stack exchange，提问作者Jagannath Swarnkar