从 Material UI v4 迁移到 v5

Backstage 支持使用 Material UI v5 开发新插件或组件。同时，应用程序的大部分内容以及现有插件仍将使用 Material UI v4。为了同时支持 Material UI v4 和 v5，我们引入了一个新概念，称为UnifiedTheme其目标是UnifiedTheme这样做的目的是通过并行运行两个版本、应用类似的主题选项和支持未来可能的 Material UI 版本来实现逐步迁移。

默认情况下UnifiedThemeProvider如果您在您的createApp函数，您需要替换 Material UIThemeProvider与UnifiedThemeProvider:

+ import import {
+   UnifiedThemeProvider,
+   themes as builtinThemes,
+ } from '@backstage/theme';

  const app = createApp({
    // ...
    themes: [
      {
        // ...
        provider: ({ children }) => (
-         <ThemeProvider theme={lightTheme}>.
-           <CssBaseline>{children}</CssBaseline>.
-         </ThemeProvider
+         <UnifiedThemeProvider theme={builtinThemes.light} children={children} />
        ),
      }
    ]
  });

在对 Backstage 实例进行具体更改之前，最好先看看Material UI 提供的迁移指南首先，它分解了 v4 和 v5 之间的差异，使您更容易理解它们对Backstage实例和插件的影响。

值得注意的是，我们仍在使用@mui/styles&jss您可能会偶然发现迁移到emotion当使用makeStyles或withStyles无需切换到emotion.

需要注意的是，Material UI v5 应与 React 版本 17 或更高版本配合使用。这意味着，如果您打算在插件中使用 Material UI v5 组件，您必须为这些插件强制执行 React 版本至少为 17：

...
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0",
    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
  },
...

为了符合 Material UI 的建议，我们正在执行一项新的工整规则，该规则更倾向于标准导入，而不是命名导入，同时还限制第三级导入，因为它们被认为是私有的 (指南：最小化软件包大小).

有core-components以及从 Backstage 导出的组件*-react在这些情况下，你仍将被迫使用 Material UI v4。

有关 Material UI v5 迁移的当前已知问题，请关注我们的GitHub 上的里程碑如果遇到不同的问题，请打开一个新问题。

插件

要将您的插件迁移到 Material UI v5，您可以利用现有资源。

Manually fix the imports from named to default imports to match the new linting rules for minimizing bundle size. Note: you can use the new @backstage/no-top-level-material-ui-4-imports ESLint rule to help with this. 2. Run the migration codemod for the path of the specific plugin: npx @mui/codemod v5.0.0/preset-safe plugins/<path>. 3. Take a look at possible TODO: items the codemod could not fix. 4. Remove types & methods from @backstage/theme which are marked as @deprecated. 5. Ensure you are using "react": "^17.0.0" (or newer) as a peer dependency

您可以按照迁移 GraphiQL 插件作为插件迁移的示例。

插件​

插件