首次使用Vite遇@mui/styles导入失败问题求助

报错原因 #

@mui/styles是Material UI v5的独立样式工具包，并不包含在@mui/material依赖包内。你当前只安装了@mui/material，缺失@mui/styles，导致Vite无法找到该模块，从而抛出导入解析失败的错误。

解决步骤 #

1. 安装@mui/styles依赖
   在项目根目录打开终端，根据你使用的包管理器执行对应命令：

   • npm：

     npm install @mui/styles
     

   • yarn：

     yarn add @mui/styles
     

   • pnpm：

     pnpm add @mui/styles
     

2. 重启Vite开发服务器
   安装完成后，关闭当前运行的Vite服务，重新启动，确保新安装的模块被Vite识别。

额外提示 #

Material UI v5官方更推荐使用@mui/material/styles提供的styled API或组件的sx属性来编写样式，@mui/styles主要是为了兼容v4版本的makeStyles写法。如果是新项目，可以考虑迁移到官方推荐的样式方案，避免后续版本兼容问题。

内容的提问来源于stack exchange，提问作者83hru2