diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js index adc929013d1701..91601cdd9cb3dd 100644 --- a/packages/material-ui-system/src/spacing.js +++ b/packages/material-ui-system/src/spacing.js @@ -101,7 +101,14 @@ export function createUnarySpacing(theme) { } if (process.env.NODE_ENV !== 'production') { - if (abs > themeSpacing.length - 1) { + if (!Number.isInteger(abs)) { + console.error( + [ + 'Material-UI: The `theme.spacing` array type cannot be combined with non integer values.' + + 'You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.', + ].join('\n'), + ); + } else if (abs > themeSpacing.length - 1) { console.error( [ `Material-UI: The value provided (${abs}) overflows.`, diff --git a/packages/material-ui-system/src/spacing.test.js b/packages/material-ui-system/src/spacing.test.js index 5e9c066dfd38af..abd5aa250a2d01 100644 --- a/packages/material-ui-system/src/spacing.test.js +++ b/packages/material-ui-system/src/spacing.test.js @@ -71,6 +71,31 @@ describe('spacing', () => { ); expect(output).to.deep.equal({ padding: undefined }); }); + + it('should warn if non integer value is used with theme.spacing defined as array', () => { + let output; + expect(() => { + output = spacing({ + theme: { + spacing: [1, 2, 3, 4, 5, 6], + }, + p: 0.5, + }); + }).toErrorDev( + 'Material-UI: The `theme.spacing` array type cannot be combined with non integer values.', + ); + expect(output).to.deep.equal({ padding: undefined }); + }); + + it('should accept non integer value', () => { + const output = spacing({ + theme: { + spacing: 8, + }, + p: 0.5, + }); + expect(output).to.deep.equal({ padding: 4 }); + }); }); it('should support negative values', () => {