Make MUIv4 not optional

- Fix smaller v5 errors in GraphQL Plugin

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/theme/src/unified/UnifiedTheme.tsx

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import type {
+import {
   Theme as Mui4Theme,
   ThemeOptions as ThemeOptionsV4,
+  createTheme,
 } from '@material-ui/core/styles';
 import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette';
 import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette';
@@ -75,13 +76,14 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme {
   const components = { ...defaultComponentThemes, ...options.components };
   const v5Theme = createV5Theme({ ...themeOptions, components });
 
-  const mui4Styles = maybeLoadMui4Styles();
+  // TODO: Not super relevant in the beginning
+  /*   const mui4Styles = maybeLoadMui4Styles();
   if (!mui4Styles) {
     return new UnifiedThemeHolder(undefined, v5Theme);
-  }
+  } */
 
   const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components);
-  const v4Theme = { ...mui4Styles.createTheme(themeOptions), ...v4Overrides };
+  const v4Theme = { ...createTheme(themeOptions), ...v4Overrides };
   return new UnifiedThemeHolder(v4Theme, v5Theme);
 }
 

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -15,7 +15,11 @@
  */
 
 import React, { ReactNode } from 'react';
-import type { Theme as Mui4Theme } from '@material-ui/core/styles';
+import {
+  Theme as Mui4Theme,
+  StylesProvider,
+  ThemeProvider,
+} from '@material-ui/core/styles';
 import {
   StyledEngineProvider,
   Theme as Mui5Theme,
@@ -27,7 +31,7 @@ import {
 } from '@mui/styles';
 import Mui5CssBaseline from '@mui/material/CssBaseline';
 import { UnifiedTheme } from './types';
-import { maybeLoadMui4CssBaseline, maybeLoadMui4Styles } from '../v4/load';
+import { CssBaseline } from '@material-ui/core';
 
 const generateV4ClassName = createGenerateClassName({
   seed: 'm4',
@@ -65,10 +69,10 @@ export function UnifiedThemeProvider(
     if (v5Theme) {
       cssBaseline = <Mui5CssBaseline enableColorScheme />;
     } else if (v4Theme) {
-      const CssBaseline = maybeLoadMui4CssBaseline();
+      /* const CssBaseline = maybeLoadMui4CssBaseline();
       if (!CssBaseline) {
         throw new Error('Failed to load MUI 4 CssBaseline component');
-      }
+      } */
       cssBaseline = <CssBaseline />;
     }
   }
@@ -81,11 +85,11 @@ export function UnifiedThemeProvider(
   );
 
   if (v4Theme) {
-    const styles = maybeLoadMui4Styles();
+    /* const styles = maybeLoadMui4Styles();
     if (!styles) {
       throw new Error('Failed to load MUI 4 styles package');
     }
-    const { StylesProvider, ThemeProvider } = styles;
+    const { StylesProvider, ThemeProvider } = styles; */
     result = (
       <StylesProvider generateClassName={generateV4ClassName} injectFirst>
         <ThemeProvider theme={v4Theme as Mui4Theme}>{result}</ThemeProvider>