From 82a42f34a1565028436890b96eb48104b5363cbb Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 2 Jun 2023 17:01:00 +0200 Subject: [PATCH] Add Migrating to v5 Guide in Custom Theme Documentation Signed-off-by: Philipp Hugenroth --- docs/getting-started/app-custom-theme.md | 25 ++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 3b042d5eb4..dff7754852 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -484,3 +484,28 @@ You can see more ways to use this in the [Storybook Sidebar examples](https://ba In addition to a custom theme, a custom logo, you can also customize the homepage of your app. Read the full guide on the [next page](homepage.md). + +## Migrating to Material UI v5 + +For supporting Material UI v5 in addition to v4 we introduced a `UnifiedThemeProvider` allowing a step-by-step migration. To use it you have to update your App's `ThemeProvider` in `app/src/App.tsx` like the following: + +```diff + Provider: ({ children }) => ( +- +- {children} +- ++ + ), +``` + +When you are looking for migrating code from v4 to v5 the [Migration Guide provided by MUI](https://mui.com/material-ui/migration/migration-v4/) might be a helpful resource. It is worth mentioning that we are still using `@mui/styles` & thereby `jss`. You might stumble accross the migration to `emotion` for `makeStyles` or `withStyles`. It is not required to move to `emotion` yet. + +### Plugins + +To migrate your plugin to MUI v5 you can build up on the resources available. + +1. Run the migration `codemod` for the path of the specific plug: `npx @mui/codemod v5.0.0/preset-safe ` +2. Manual fix imports to align with linting rules & take a look at potential `TODO:` items the `codemod` could not fix. +3. Remove types & methods from `@backstage/theme`, which are marked as `@deprecated` + +You can follow the [migration of the GraphiQL plugin](https://github.com/backstage/backstage/pull/17696) as an example plugin migration.