diff --git a/packages/theme/package.json b/packages/theme/package.json index 804d2bec4c..0cd2643146 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -34,8 +34,7 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@mui/material": "^5.12.2", - "@mui/system": "^5.13.6" + "@mui/material": "^5.12.2" }, "peerDependencies": { "@material-ui/core": "^4.12.2", diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index 3a0e7331f8..a87f047f5c 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -17,7 +17,6 @@ import type { Overrides } from '@material-ui/core/styles/overrides'; import type { ComponentsProps } from '@material-ui/core/styles/props'; import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; -import { createSpacing } from '@mui/system'; import { CSSProperties } from 'react'; type V5Override = ComponentsOverrides[Exclude< @@ -30,6 +29,26 @@ type StaticStyleRules = Record< CSSProperties | Record >; +// Utility function based on v5 `createSpacing`: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/createTheme/createSpacing.ts#L42C3-L59C5 +const __v5Spacing = + (defaultSpacing: number) => + (...argsInput: ReadonlyArray) => { + const args = argsInput.length === 0 ? [1] : argsInput; + const transform = (argument: string | number, themeSpacing: number) => { + if (typeof argument === 'string') { + return argument; + } + return themeSpacing * argument; + }; + + return args + .map(argument => { + const output = transform(argument, defaultSpacing); + return typeof output === 'number' ? `${output}px` : output; + }) + .join(' '); + }; + // Converts callback-based overrides to static styles, e.g. // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } function adaptV5CssBaselineOverride( @@ -61,9 +80,12 @@ function adaptV5Override( return Object.fromEntries( Object.entries(overrides).map(([className, style]) => { if (typeof style === 'function') { - // Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix - // `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41 - theme.spacing = createSpacing(theme.spacing); + const defaultSpacing = theme.spacing(1); + if (typeof defaultSpacing === 'number') { + // Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix + // `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41 + theme.spacing = __v5Spacing(defaultSpacing); + } return [className, style({ theme })]; } return [className, style]; diff --git a/yarn.lock b/yarn.lock index b7f3cc813d..6ec982a47d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9973,7 +9973,6 @@ __metadata: "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 "@mui/material": ^5.12.2 - "@mui/system": ^5.13.6 "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: "@material-ui/core": ^4.12.2 @@ -13367,7 +13366,7 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.12.1, @mui/system@npm:^5.13.6": +"@mui/system@npm:^5.12.1": version: 5.13.6 resolution: "@mui/system@npm:5.13.6" dependencies: