diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index 8368394fdcad53..bbb0122f36ebf2 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/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; diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index c96e49213ebf66..ae8c11db7b1b2e 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -256,5 +256,69 @@ describe('', () => { flexDirection: 'column', }); }); + + it('should generate correct styles if custom breakpoints are provided in theme', () => { + const customTheme = createTheme({ + breakpoints: { + values: { + smallest: 0, + small: 375, + mobile: 600, + tablet: 992, + desktop: 1200, + }, + }, + }); + + expect( + style({ + ownerState: { + direction: 'column', + spacing: 4, + }, + theme: customTheme, + }), + ).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 customTheme = createTheme({ + breakpoints: { + values: { + smallest: 0, + small: 375, + mobile: 600, + tablet: 992, + desktop: 1200, + }, + }, + }); + + 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', + }); + }); }); }); diff --git a/packages/mui-system/src/breakpoints.js b/packages/mui-system/src/breakpoints.js index 21f09e24848d66..8760755ab44603 100644 --- a/packages/mui-system/src/breakpoints.js +++ b/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; }, {}); diff --git a/packages/mui-system/src/breakpoints.test.js b/packages/mui-system/src/breakpoints.test.js index 83430dd1445533..6b57a3caa395b1 100644 --- a/packages/mui-system/src/breakpoints.test.js +++ b/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 };