fix(theme): added a workaround so that defaultProps are also picked u…

…p from MUI v5 components (like Button disabledRipple or Grid spacing) (#204)

Signed-off-by: Christoph Jerolimov <[email protected]>

workspaces/theme/.changeset/warm-grapes-matter.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+added a workaround so that `defaultProps` are also picked up from MUI v5 components (like Button disabledRipple or Grid spacing)

workspaces/theme/plugins/theme/src/components/ThemeProvider.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { AppTheme } from '@backstage/core-plugin-api';
+import { UnifiedTheme, UnifiedThemeProvider } from '@backstage/theme';
+
+import {
+  StyledEngineProvider,
+  ThemeProvider as Mui5Provider,
+  Theme as Mui5Theme,
+} from '@mui/material/styles';
+
+import { useTheme } from '../hooks/useTheme';
+import { useThemeConfig } from '../hooks/useThemeConfig';
+import { ThemeConfig } from '../types';
+
+/**
+ * Uses the UnifiedThemeProvider to style MUI v4 and v5 components.
+ *
+ * This component duplicated the StyledEngineProvider and MUI v5 ThemeProvider
+ * to solve an issue that the defaultProps from the component configurations
+ * (see `utils/createComponents.ts`) wasn't picked up.
+ *
+ * https://github.com/backstage/backstage/blob/master/packages/theme/src/unified/UnifiedThemeProvider.tsx#L94-L100
+ */
+const ThemeProvider = ({
+  theme,
+  children,
+}: {
+  theme: UnifiedTheme;
+  children: React.ReactNode;
+}) => (
+  <UnifiedThemeProvider theme={theme}>
+    <StyledEngineProvider injectFirst>
+      <Mui5Provider theme={theme.getTheme('v5') as Mui5Theme}>
+        {children}
+      </Mui5Provider>
+    </StyledEngineProvider>
+  </UnifiedThemeProvider>
+);
+
+export const createThemeProvider = (
+  theme: UnifiedTheme,
+): AppTheme['Provider'] =>
+  function RHDHThemeProvider({ children }) {
+    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  };
+
+export const createThemeProviderForThemeConfig = (
+  themeConfig: ThemeConfig,
+): AppTheme['Provider'] =>
+  function RHDHThemeProviderForThemeConfig({ children }) {
+    const theme = useTheme(themeConfig);
+    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  };
+
+export const createThemeProviderForThemeName = (
+  themeName: string,
+): AppTheme['Provider'] =>
+  function RHDHThemeProviderForThemeName({ children }) {
+    const themeConfig = useThemeConfig(themeName);
+    const theme = useTheme(themeConfig);
+    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  };

workspaces/theme/plugins/theme/src/themes.tsx

@@ -15,44 +15,19 @@
  */
 import React from 'react';
 import { AppTheme } from '@backstage/core-plugin-api';
-import { UnifiedTheme, UnifiedThemeProvider, themes } from '@backstage/theme';
+import { themes } from '@backstage/theme';
+
 import LightIcon from '@material-ui/icons/WbSunny';
 import DarkIcon from '@material-ui/icons/Brightness2';
 import { createTheme } from '@mui/material/styles';
 
+import {
+  createThemeProvider,
+  createThemeProviderForThemeName,
+  createThemeProviderForThemeConfig,
+} from './components/ThemeProvider';
 import * as backstage from './backstage';
 import * as rhdh from './rhdh';
-import { ThemeConfig } from './types';
-import { useTheme } from './hooks/useTheme';
-import { useThemeConfig } from './hooks/useThemeConfig';
-
-const createThemeProvider = (theme: UnifiedTheme): AppTheme['Provider'] =>
-  function RHDHThemeProvider({ children }) {
-    return (
-      <UnifiedThemeProvider theme={theme}>{children}</UnifiedThemeProvider>
-    );
-  };
-
-const createThemeProviderForThemeConfig = (
-  themeConfig: ThemeConfig,
-): AppTheme['Provider'] =>
-  function RHDHThemeProviderForThemeConfig({ children }) {
-    const theme = useTheme(themeConfig);
-    return (
-      <UnifiedThemeProvider theme={theme}>{children}</UnifiedThemeProvider>
-    );
-  };
-
-const createThemeProviderForThemeName = (
-  themeName: string,
-): AppTheme['Provider'] =>
-  function RHDHThemeProviderForThemeName({ children }) {
-    const themeConfig = useThemeConfig(themeName);
-    const theme = useTheme(themeConfig);
-    return (
-      <UnifiedThemeProvider theme={theme}>{children}</UnifiedThemeProvider>
-    );
-  };
 
 export const getAllThemes = (): AppTheme[] => {
   return [