Negative spacing broken when using css variables and an array as spacing transformation

[drskullster]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-pzfbrtbw?file=Demo.tsx
2. Notice that when using a number or a function is passed to the spacing property of the createTheme function, things work as expected
3. But if you pass an array, negative margins don't work anymore.
4. Comment the cssVariables: true property and notice that negative spacing when passing an array to the spacing property works as expected

Current behavior

When using css variables and defining an array for the theme.spacing property, then trying to use a negative spacing in the sx utility, the value will be transformed to 0.

Note that interestingly there's a difference between the stackblitz repro and my local environment. In my local env, the value is transformed to -var(--mui-spacing-2). I'm on v6.3.1 though, didn't see anyting related to tthis in the changelog but I might have missed it.

Expected behavior

Ideally the transformation would result to calc(-1 * var(--mui-spacing-2))

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: negative spacing css variables