theme: add transform for CssBaseline to fix v5 style

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/theme/src/unified/overrides.test.ts

@@ -107,10 +107,8 @@ describe('transformV5ComponentThemesToV4', () => {
       transformV5ComponentThemesToV4(mockTheme, {
         MuiCssBaseline: {
           styleOverrides: theme => ({
-            '@global': {
-              html: {
-                color: theme.palette.primary.main,
-              },
+            html: {
+              color: theme.palette.primary.main,
             },
           }),
           defaultProps: {

packages/theme/src/unified/overrides.ts

@@ -19,13 +19,34 @@ import { ComponentsProps } from '@material-ui/core/styles/props';
 import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles';
 import { CSSProperties } from 'react';
 
-type V5Override = ComponentsOverrides[keyof ComponentsOverrides];
+type V5Override = ComponentsOverrides[Exclude<
+  keyof ComponentsOverrides,
+  'MuiCssBaseline'
+>];
 type V4Override = Overrides[keyof Overrides];
 type StaticStyleRules = Record<
   string,
   CSSProperties | Record<string, CSSProperties>
 >;
 
+// Converts callback-based overrides to static styles, e.g.
+// { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } }
+function adaptV5CssBaselineOverride(
+  theme: Theme,
+  overrides: ComponentsOverrides['MuiCssBaseline'],
+): StaticStyleRules | undefined {
+  if (!overrides || typeof overrides === 'string') {
+    return undefined;
+  }
+
+  const styles = typeof overrides === 'function' ? overrides(theme) : overrides;
+  if (styles) {
+    return { '@global': styles } as StaticStyleRules;
+  }
+
+  return undefined;
+}
+
 // Converts callback-based overrides to static styles, e.g.
 // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } }
 function adaptV5Override(
@@ -35,9 +56,6 @@ function adaptV5Override(
   if (!overrides || typeof overrides === 'string') {
     return undefined;
   }
-  if (typeof overrides === 'function') {
-    return overrides(theme) as StaticStyleRules;
-  }
   if (typeof overrides === 'object') {
     return Object.fromEntries(
       Object.entries(overrides).map(([className, style]) => {
@@ -104,9 +122,16 @@ export function transformV5ComponentThemesToV4(
       continue;
     }
     if ('styleOverrides' in component) {
-      overrides[name] = extractV5StateOverrides(
-        adaptV5Override(theme, component.styleOverrides as V5Override),
-      );
+      if (name === 'MuiCssBaseline') {
+        overrides[name] = adaptV5CssBaselineOverride(
+          theme,
+          component.styleOverrides as ComponentsOverrides['MuiCssBaseline'],
+        );
+      } else {
+        overrides[name] = extractV5StateOverrides(
+          adaptV5Override(theme, component.styleOverrides as V5Override),
+        );
+      }
     }
     if ('defaultProps' in component) {
       props[name] = component.defaultProps;

packages/theme/src/v5/defaultComponentThemes.ts

@@ -24,20 +24,18 @@ import { darken, lighten, ThemeOptions } from '@mui/material/styles';
 export const defaultComponentThemes: ThemeOptions['components'] = {
   MuiCssBaseline: {
     styleOverrides: theme => ({
-      '@global': {
-        html: {
-          height: '100%',
-          fontFamily: theme.typography.fontFamily,
-        },
-        body: {
-          height: '100%',
-          fontFamily: theme.typography.fontFamily,
-          'overscroll-behavior-y': 'none',
-        },
-        a: {
-          color: 'inherit',
-          textDecoration: 'none',
-        },
+      html: {
+        height: '100%',
+        fontFamily: theme.typography.fontFamily,
+      },
+      body: {
+        height: '100%',
+        fontFamily: theme.typography.fontFamily,
+        overscrollBehaviorY: 'none',
+      },
+      a: {
+        color: 'inherit',
+        textDecoration: 'none',
       },
     }),
   },