将 React 应用程序从 Material UI v4 升级到 v5答案

【问题标题】：Upgrading React application from Material UI v4 to v5将 React 应用程序从 Material UI v4 升级到 v5
【发布时间】：2022-09-23 12:12:33
【问题描述】：

我在我的反应应用程序中将 Material UI 从 v4 升级到 v5。我正在运行反应版本 17.0.2。我第一次尝试升级到 v5，我使用了 codemod，但我遇到了太多无法解释的错误，所以我重新排列了我的应用程序并安装了新的 v5 包。下面是我的 package.json 文件中新旧材质 ui 包的列表。

\"@emotion/react\": \"^11.7.1\",
\"@emotion/styled\": \"^11.6.0\",
\"@material-ui/core\": \"^4.12.3\",
\"@material-ui/icons\": \"4.9.1\",
\"@material-ui/lab\": \"^4.0.0-alpha.60\",
\"@material-ui/utils\": \"^4.11.2\",
\"@mui/icons-material\": \"^5.4.1\",
\"@mui/lab\": \"^5.0.0-alpha.68\",
\"@mui/material\": \"^5.4.1\",
\"@mui/styles\": \"^5.4.1\",

我想逐个模块转换应用程序模块，以便我可以在问题发生时发现并修复它们。在我的第一个模块中进行更改后，我收到以下错误消息：

导出默认通用；

SyntaxError: 意外的令牌 \'export\'

问题：

是否应该可以在迁移过程中同时运行这两个版本的材料 UI，还是只能运行其中之一？
如果可以同时运行这两个版本，是什么导致了这个错误？
我是否需要对 Webpack 或其他任何内容进行更改才能进行迁移？
欢迎任何关于迁移的建议。我查看了文档，不幸的是进行了更改，因为它们表明我处于一种无法解决问题的困境中。

你看过官方的迁移指南吗：mui.com/guides/migration-v4
我做到了。我尝试更新一个文件夹，然后进行测试，得到上面指出的错误。你知道是否可以为一个文件夹运行 codemod，然后同时运行版本 4 和 5 进行测试？来自 Doc：运行 codemods 我们准备了这些 codemods 来简化您的迁移体验。 preset-safe 此 codemod 包含迁移所需的大部分转换器。（这个 codemod 应该每个文件夹只应用一次） npx @mui/codemod v5.0.0/preset-safe <path> 如果你想一个一个运行转换器，请查看 preset-safe codemod 了解更多详细信息。

标签： reactjs material-ui migration upgrade

【解决方案1】：

我刚刚将我们的 react mono repo 从 material ui v4 升级到 v5。我的建议是，不要使用 codemods，因为人们有不同的方式来定制他们的组件样式，它可能不适合所有人。至少对于我们来说，它挂起。以下是我执行的步骤：

安装迁移指南中提到的软件包
更新包名称：@material-ui/icons -> @mui/icons-material, @material-ui/lab -> @mui/lab
用createTheme等替换createMuiTheme

以上步骤不会破坏您的应用程序，应该仍然可以正常运行

然后将@material-ui/core 替换为@mui/material，这一步会占用80% 的工作量。我逐个文件，逐个特性地做了。您应该始终检查您的应用程序在每次更改时运行良好。我知道这听起来需要做很多工作，但是一旦你找到了一种模式，你就会变得更快。以下是技巧：

(1) 对于任何 makeStyles、createStyles，我用一个对象替换，例如：常量类 = { 名称：（主题）=>（{ 字体大小：18，字体重量：500，线高：1.1，颜色：theme.myNora.blue， }), 可点击：{ 光标：“指针”， } }

在你的组件中，如果是材质 ui 组件，请将 className 替换为 sx；如果是通用 html 标记，请将 className 替换为 style

(2) 对于任何 withStyles，我将其替换为 styled()。您可以将它与通用 html 标记和材料 ui 组件一起使用。如果您需要传递主题，请确保像 {theme} 一样传递它。此外，如果您在 withStyles 中有 root，则在转换为 styled() 时必须将其删除。

将日期选择器从@mui/lab 移动到@mui/x

这涵盖了我们的大部分负载。确保在迁移期间经常测试您的应用程序，否则，您将不知道哪个更改会破坏您的应用程序。希望这会对你有所帮助。

【讨论】：