[Grid] Fix generated classes for spacing prop when the value is object

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

@@ -175,6 +175,30 @@ export function generateColumnGap({ theme, ownerState }) {
   return styles;
 }
 
+export function resolveSpacingClasses(spacing, container, styles = {}) {
+  // in case of grid item or undefined/null or `spacing` <= 0
+  if (!container || !spacing || spacing <= 0) {
+    return [];
+  }
+  // in case of string/number `spacing`
+  if (
+    (typeof spacing === 'string' && !Number.isNaN(Number(spacing))) ||
+    typeof spacing === 'number'
+  ) {
+    return [styles[`spacing-xs-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+  }
+  // in case of object `spacing`
+  const { xs, sm, md, lg, xl } = spacing;
+
+  return [
+    Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`),
+    Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`),
+    Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`),
+    Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`),
+    Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`),
+  ];
+}
+
 // Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
@@ -193,7 +217,7 @@ const GridRoot = styled('div', {
       container && styles.container,
       item && styles.item,
       zeroMinWidth && styles.zeroMinWidth,
-      container && spacing !== 0 && styles[`spacing-xs-${String(spacing)}`],
+      ...resolveSpacingClasses(spacing, container, styles),
       direction !== 'row' && styles[`direction-xs-${String(direction)}`],
       wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`],
       xs !== false && styles[`grid-xs-${String(xs)}`],
@@ -245,7 +269,7 @@ const useUtilityClasses = (ownerState) => {
       container && 'container',
       item && 'item',
       zeroMinWidth && 'zeroMinWidth',
-      container && spacing !== 0 && `spacing-xs-${String(spacing)}`,
+      ...resolveSpacingClasses(spacing, container),
       direction !== 'row' && `direction-xs-${String(direction)}`,
       wrap !== 'wrap' && `wrap-xs-${String(wrap)}`,
       xs !== false && `grid-xs-${String(xs)}`,

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

@@ -166,6 +166,44 @@ describe('<Grid />', () => {
       });
     });
 
+    it('should not support undefined values', () => {
+      const { container } = render(
+        <Grid container>
+          <Grid item data-testid="child" />
+        </Grid>,
+      );
+      expect(container.firstChild).not.to.have.class('MuiGrid-spacing-xs-undefined');
+    });
+
+    it('should not support zero values', () => {
+      const { container } = render(
+        <Grid container spacing={0}>
+          <Grid item data-testid="child" />
+        </Grid>,
+      );
+      expect(container.firstChild).not.to.have.class('MuiGrid-spacing-xs-0');
+    });
+
+    it('should support object values', () => {
+      const { container } = render(
+        <Grid container spacing={{ sm: 1.5, md: 2 }}>
+          <Grid item data-testid="child" />
+        </Grid>,
+      );
+      expect(container.firstChild).to.have.class('MuiGrid-spacing-sm-1.5');
+      expect(container.firstChild).to.have.class('MuiGrid-spacing-md-2');
+    });
+
+    it('should ignore object values of zero', () => {
+      const { container } = render(
+        <Grid container spacing={{ sm: 0, md: 2 }}>
+          <Grid item data-testid="child" />
+        </Grid>,
+      );
+      expect(container.firstChild).not.to.have.class('MuiGrid-spacing-sm-0');
+      expect(container.firstChild).to.have.class('MuiGrid-spacing-md-2');
+    });
+
     it('should generate correct responsive styles', () => {
       const theme = createTheme();
       expect(