[Stack, system] Apply correct responsive styles if any custom breakpoints are provided

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

@@ -60,7 +60,10 @@ export const style = ({ ownerState, theme }) => {
     const transformer = createUnarySpacing(theme);
 
     const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-      if (ownerState.spacing[breakpoint] != null || ownerState.direction[breakpoint] != null) {
+      if (
+        (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null) ||
+        (typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null)
+      ) {
         acc[breakpoint] = true;
       }
       return acc;

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

@@ -256,5 +256,73 @@ describe('<Stack />', () => {
         flexDirection: 'column',
       });
     });
+
+    it('should generate correct styles if custom breakpoints are provided in theme', () => {
+      expect(
+        style({
+          ownerState: {
+            direction: 'column',
+            spacing: 4,
+          },
+          theme: {
+            ...defaultTheme,
+            breakpoints: {
+              values: {
+                smallest: 0,
+                small: 375,
+                mobile: 600,
+                tablet: 992,
+                desktop: 1200,
+              },
+            },
+          },
+        }),
+      ).to.deep.equal({
+        '& > :not(style) + :not(style)': {
+          margin: 0,
+          marginTop: '32px',
+        },
+        display: 'flex',
+        flexDirection: 'column',
+      });
+    });
+
+    it('should generate correct responsive styles if custom responsive spacing values are provided', () => {
+      const breakpointsValues = {
+        smallest: 0,
+        small: 375,
+        mobile: 600,
+        tablet: 992,
+        desktop: 1200,
+      };
+
+      const customTheme = {
+        ...defaultTheme,
+        breakpoints: {
+          values: breakpointsValues,
+          keys: ['smallest', 'small', 'mobile', 'tablet', 'desktop'],
+          up: (key) => `@media (min-width:${breakpointsValues[key]}px)`,
+        },
+      };
+
+      expect(
+        style({
+          ownerState: {
+            direction: 'column',
+            spacing: { small: 4 },
+          },
+          theme: customTheme,
+        }),
+      ).to.deep.equal({
+        [`@media (min-width:${customTheme.breakpoints.values.small}px)`]: {
+          '& > :not(style) + :not(style)': {
+            margin: 0,
+            marginTop: '32px',
+          },
+        },
+        display: 'flex',
+        flexDirection: 'column',
+      });
+    });
   });
 });

packages/mui-system/src/breakpoints.js

@@ -158,12 +158,14 @@ export function resolveBreakpointValues({
       acc[breakpoint] =
         breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else {
+    } else if (typeof breakpointValues === 'object') {
       acc[breakpoint] =
         breakpointValues[breakpoint] != null
           ? breakpointValues[breakpoint]
-          : breakpointValues[previous] || breakpointValues;
+          : breakpointValues[previous];
       previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
     }
     return acc;
   }, {});

packages/mui-system/src/breakpoints.test.js

@@ -192,6 +192,32 @@ describe('breakpoints', () => {
         expect(values).to.equal(3);
       });
 
+      it('return prop as it is for prop of fixed string value', () => {
+        const directionValue = 'columns';
+        const values = resolveBreakpointValues({
+          values: directionValue,
+        });
+        expect(values).to.equal('columns');
+      });
+
+      it('given custom base, resolve breakpoint values for prop of string type', () => {
+        const directionValue = 'columns';
+        const values = resolveBreakpointValues({
+          values: directionValue,
+          base: { small: true },
+        });
+        expect(values).to.deep.equal({ small: directionValue });
+      });
+
+      it('given custom base, resolve breakpoint values for prop of number type', () => {
+        const spacingValue = 3;
+        const values = resolveBreakpointValues({
+          values: spacingValue,
+          base: { small: true },
+        });
+        expect(values).to.deep.equal({ small: spacingValue });
+      });
+
       it('given custom base, resolve breakpoint values for prop of array type', () => {
         const columns = [1, 2, 3];
         const customBase = { extraSmall: true, small: true, medium: true, large: true };