如何将material-ui-next升级至material-ui最新版本？

别担心，我来帮你梳理清楚升级的步骤，其实操作很简单，分两种情况来处理：

情况1：升级到原 material-ui-next 线的最终稳定版 #

material-ui-next 是 Material UI v4 系列的早期预览包，后来官方将其正式命名为 @material-ui/core，它的最终稳定版就是 v4.12.4。如果只是想升级到这个分支的最新版，可以执行以下命令：

使用 npm #

npm update @material-ui/core @material-ui/icons

如果你的项目里还在使用旧的 material-ui-next 包名，先卸载旧包再安装正式包：

npm uninstall material-ui-next
npm install @material-ui/core @material-ui/icons

使用 yarn #

yarn upgrade @material-ui/core @material-ui/icons

旧包名替换的话：

yarn remove material-ui-next
yarn add @material-ui/core @material-ui/icons

情况2：迁移到最新的 MUI v5 版本（推荐） #

如果想直接升级到目前官方维护的最新版本（MUI v5）—— 毕竟 v4 已经停止维护了，需要做一些包名替换和代码调整：

• 卸载旧包

# npm
npm uninstall @material-ui/core @material-ui/icons material-ui-next

# yarn
yarn remove @material-ui/core @material-ui/icons material-ui-next

• 安装最新的 MUI v5 包

# npm
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

# yarn
yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled

• 代码调整要点
  • 替换导入路径：比如把 import Button from '@material-ui/core/Button' 改成 import Button from '@mui/material/Button'
  • 部分组件的 props 有调整，比如 variant 属性的可选值，部分旧的 API 被移除，你可以在项目运行时根据控制台的警告逐步修改

另外，如果你在升级过程中遇到依赖冲突，可以尝试删除 node_modules 文件夹和锁文件（package-lock.json 或 yarn.lock），然后重新执行依赖安装命令。

内容的提问来源于stack exchange，提问作者Alex Wong