[material-ui] Spacing customization not working on 6.0.0-beta.6 when enabling CSS variables

[trungutt]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/old-sunset-42dgnh?file=%2Fsrc%2FDemo.tsx%3A19%2C52

Steps:

1. Go to Demo.tsx. This contains a little spacing customization for theme creation (so that we could call something like theme.spacing('xs') in downstream client).
2. Comment/Uncomment cssVariables: true line. The goal is to switch theme creation between Non CSS Vars <> With CSS Vars theme
3. Observe the change in height

Screen.Recording.2024-08-20.at.12.27.14.mov

Current behavior

With MUI version 6.0.0-beta.6, switching to CSS Vars theme doesn't take into account spacing customization.

I didn't try with MUI v5 as CSS Vars theming seems to be unstable there.

Expected behavior

With MUI version 6.0.0-beta.6, switching to CSS Vars theme should take into account spacing customization.

Context

We are migrating to MUI v6 (+ CSS Vars support) and our frontend infra flags this difference.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: v6, customization, spacing

[trungutt]

At first glance, maybe this comes from

material-ui/packages/mui-system/src/spacing/spacing.js

Line 96 in f9425c5

const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;

somehow getPath behaves differently with CSS Vars theming

[siriwatknp]

With CSS variables enabled, what behavior of theme.spacing() do you expect?

[trungutt]

We have that spacing customisation in Non Vars theme construction. That allows us to do something like theme.spacing('xs') that returns '100px' instead of doing theme.spacing(some_number), in that specific live example.

In reality we have more scales than just xs. The example works as expected without cssVariables: true, but switching to CSS Vars theme with cssVariables: true makes it stop working

[siriwatknp]

We have that spacing customisation in Non Vars theme construction. That allows us to do something like theme.spacing('xs') that returns '100px' instead of doing theme.spacing(some_number), in that specific live example.

In reality we have more scales than just xs. The example works as expected without cssVariables: true, but switching to CSS Vars theme with cssVariables: true makes it stop working

Note that with this fix, when a custom spacing function is provided, a CSS variable for spacing will not be generated.

[trungutt]

@siriwatknp thanks for your quick reactivity 💯