fix regression

siriwatknp · Nov 11, 2024 · 130cea6 · 130cea6
1 parent ad6be40
commit 130cea6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/mui-material/src/Grid/Grid.js b/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,

diff --git a/packages/mui-material/src/Grid/Grid.test.js b/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: '16px' },
           },
           theme,
         }),
@@ -769,7 +769,7 @@ describe('Material UI <Grid />', () => {
         generateColumnGap({
           ownerState: {
             container: true,
-            columnSpacing: { xs: 1, sm: 2 },
+            columnSpacing: { xs: 1, sm: '16px' },
           },
           theme,
         }),

diff --git a/packages/mui-system/src/createTheme/createSpacing.test.ts b/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(() => {