[Grid] Fix support for CSS variables (#42574)

mui · Jun 9, 2024 · cf2b165 · cf2b165
1 parent 1ee901b
commit cf2b165
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
@@ -25,14 +25,6 @@ import useTheme from '../styles/useTheme';
 import GridContext from './GridContext';
 import gridClasses, { getGridUtilityClass } from './gridClasses';
 
-function getOffset(val) {
-  const parse = parseFloat(val);
-  if (Number.isNaN(parse)) {
-    return val;
-  }
-  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
-}
-
 export function generateGrid({ theme, ownerState }) {
   let size;
 
@@ -81,7 +73,7 @@ export function generateGrid({ theme, ownerState }) {
       if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
         const themeSpacing = theme.spacing(ownerState.columnSpacing);
         if (themeSpacing !== '0px') {
-          const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
+          const fullWidth = `calc(${width} + ${themeSpacing})`;
           more = {
             flexBasis: fullWidth,
             maxWidth: fullWidth,
@@ -178,9 +170,9 @@ export function generateRowGap({ theme, ownerState }) {
 
       if (themeSpacing !== '0px') {
         return {
-          marginTop: `-${getOffset(themeSpacing)}`,
+          marginTop: theme.spacing(-propValue),
           [`& > .${gridClasses.item}`]: {
-            paddingTop: getOffset(themeSpacing),
+            paddingTop: themeSpacing,
           },
         };
       }
@@ -222,11 +214,12 @@ export function generateColumnGap({ theme, ownerState }) {
     styles = handleBreakpoints({ theme }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
+        const negativeValue = theme.spacing(-propValue);
         return {
-          width: `calc(100% + ${getOffset(themeSpacing)})`,
-          marginLeft: `-${getOffset(themeSpacing)}`,
+          width: `calc(100% + ${themeSpacing})`,
+          marginLeft: negativeValue,
           [`& > .${gridClasses.item}`]: {
-            paddingLeft: getOffset(themeSpacing),
+            paddingLeft: themeSpacing,
           },
         };
       }

diff --git a/packages/mui-system/src/spacing/spacing.test.js b/packages/mui-system/src/spacing/spacing.test.js
@@ -155,6 +155,36 @@ describe('system spacing', () => {
       expect(output).to.deep.equal({ padding: '-2em' });
     });
 
+    it('should support CSS variables single value', () => {
+      const output = spacing({
+        theme: {
+          vars: {
+            spacing: 'var(--mui-spacing)',
+          },
+        },
+        p: 1,
+      });
+      expect(output).to.deep.equal({ padding: 'calc(1 * var(--mui-spacing))' });
+    });
+
+    it('should support CSS variables array', () => {
+      const output = spacing({
+        theme: {
+          vars: {
+            spacing: [
+              'var(--mui-spacing-0)',
+              'var(--mui-spacing-1)',
+              'var(--mui-spacing-2)',
+              'var(--mui-spacing-3)',
+              'var(--mui-spacing-4)',
+            ],
+          },
+        },
+        p: 2,
+      });
+      expect(output).to.deep.equal({ padding: 'var(--mui-spacing-2)' });
+    });
+
     it('should support breakpoints', () => {
       const output1 = spacing({
         p: [1, 2],