[material-ui][Grid v1] Fix regression spacing prop with string value (#44376)

Author: siriwatknp

packages/mui-material/src/Grid/Grid.js

@@ -170,7 +170,7 @@ export function generateRowGap({ theme, ownerState }) {
 
       if (themeSpacing !== '0px') {
         return {
-          marginTop: theme.spacing(-propValue),
+          marginTop: `-${themeSpacing}`,
           [`& > .${gridClasses.item}`]: {
             paddingTop: themeSpacing,
           },
@@ -214,7 +214,7 @@ export function generateColumnGap({ theme, ownerState }) {
     styles = handleBreakpoints({ theme }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
-        const negativeValue = theme.spacing(-propValue);
+        const negativeValue = `-${themeSpacing}`;
         return {
           width: `calc(100% + ${themeSpacing})`,
           marginLeft: negativeValue,

packages/mui-material/src/Grid/Grid.test.js

@@ -746,7 +746,7 @@ describe('Material UI <Grid />', () => {
         generateRowGap({
           ownerState: {
             container: true,
-            rowSpacing: { xs: 1, sm: 2 },
+            rowSpacing: { xs: 1, sm: 2, md: '16px' },
           },
           theme,
         }),
@@ -763,13 +763,19 @@ describe('Material UI <Grid />', () => {
           },
           marginTop: '-16px',
         },
+        [`@media (min-width:${defaultTheme.breakpoints.values.md}px)`]: {
+          '& > .MuiGrid-item': {
+            paddingTop: '16px',
+          },
+          marginTop: '-16px',
+        },
       });
 
       expect(
         generateColumnGap({
           ownerState: {
             container: true,
-            columnSpacing: { xs: 1, sm: 2 },
+            columnSpacing: { xs: 1, sm: 2, md: '16px' },
           },
           theme,
         }),
@@ -788,6 +794,13 @@ describe('Material UI <Grid />', () => {
           marginLeft: '-16px',
           width: 'calc(100% + 16px)',
         },
+        [`@media (min-width:${defaultTheme.breakpoints.values.md}px)`]: {
+          '& > .MuiGrid-item': {
+            paddingLeft: '16px',
+          },
+          marginLeft: '-16px',
+          width: 'calc(100% + 16px)',
+        },
       });
     });
 

packages/mui-system/src/createTheme/createSpacing.test.ts

@@ -51,6 +51,12 @@ describe('createSpacing', () => {
     expect(spacing(1, 'auto', 2, 3)).to.equal('0.25rem auto 0.5rem 0.75rem');
   });
 
+  it('should support valid CSS unit', () => {
+    const spacing = createSpacing();
+    expect(spacing('16px')).to.equal('16px');
+    expect(spacing('1rem')).to.equal('1rem');
+  });
+
   describe('warnings', () => {
     it('should warn for wrong input', () => {
       expect(() => {