解决 "金属 ui 无法解析 '@mui/material'" 错误

当使用 MUI v5(MUI5) & React v17(React17) 时，你可能会遇到这个错误：金属 ui 无法解析 '@mui/material'，这是因为 MUI5 中的组件库已经被重命名为“@mui”而不是“@material-ui”。

为了解决这个问题，你需要在项目中替换所有的 "@material-ui"引用为 "@mui"。

这个问题可以通过以下步骤解决：

1. 查找项目中所有的 "@material-ui" 引用：

grep -rn "@material-ui" /path/to/your/project

2. 将所有的 "@material-ui"引用替换成 "@mui"引用。 你可以使用你最熟悉的代码编辑器或终端工具，比如：VS Code 或者 sed 命令。

如果你使用的是 VS Code，可以使用全局替换（Ctrl + Shift + H）的方式找到并替换所有的 "@material-ui" 引用。

3. 重启项目，你的项目现在应该能处理 "@mui/material" 了！

注意事项

• 如果你正在使用 npm 包管理工具，你还需要更新你的安装脚本（install script）和 package.json 文件中的所有 "@material-ui" 引用。

• 如果你在 TypeScript 中使用 MUI5，你需要在 tsconfig.json 文件中将 "@material-ui" 引用全部替换为 "@mui"。

• 如果你在 Next.js 项目中使用 MUI5，你还需要更新 next.config.js 文件中的 alias。

• 如果你有使用变量别名（alias）来引用 "@material-ui"，你需要同步更新别名（alias）。

总结

MUI5 的组件库已经从 "@material-ui" 重命名为 "@mui"。在使用 MUI5 和 React 17 时，你需要将所有 "@material-ui" 引用替换成 "@mui"。