diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index 4cf2fdedf5..38b4738444 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/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: { diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index 5c5990c65d..db1fb54c87 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/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 >; +// 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; diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 9b4a7fde6b..eec52e1c8b 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/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', }, }), },