Material-UI中makeStyles使用问题求助

嘿，我看你遇到了使用makeStyles时的报错问题，这大概率是依赖版本冲突导致的！

问题根源 #

你的package.json里同时存在两个完全不同的Material-UI包：

• 新版的@material-ui/core v4.9.7（这是v4版本的官方包名，支持makeStyles）
• 旧版的material-ui v0.20.2（这是早已被弃用的v0.x版本，根本没有makeStyles这个API）

这两个包会互相干扰，导致模块解析混乱，从而触发报错。

解决方案 #

按以下步骤操作来修复：

1. 卸载旧版的material-ui包
   在终端运行对应命令：

   # 使用npm
   npm uninstall material-ui
   
   # 或者使用yarn
   yarn remove material-ui
   

2. 统一所有Material-UI相关依赖的版本
   确保@material-ui/core、@material-ui/icons、@material-ui/lab等包都处于v4的兼容版本，建议升级到v4的最新稳定版（比如4.12.4），运行：

   # 使用npm
   npm update @material-ui/core @material-ui/icons @material-ui/lab @material-ui/pickers
   
   # 或者使用yarn
   yarn upgrade @material-ui/core @material-ui/icons @material-ui/lab @material-ui/pickers
   

3. 清理并重新安装依赖
   清除旧的依赖缓存和lock文件，避免残留问题：

   # macOS/Linux环境
   rm -rf node_modules package-lock.json
   npm install
   
   # Windows环境
   rmdir /s node_modules
   del package-lock.json
   npm install
   

4. 检查代码导入路径
   确保你的makeStyles是从新版包导入的，正确的导入方式是：

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

   不要从旧的material-ui包导入任何内容。

完成这些步骤后，makeStyles应该就能正常工作了！

内容的提问来源于stack exchange，提问作者Herman Stashinskii