[system] Fix maxWidth incorrectly resolving breakpoints with non-pixel units

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

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from 'test/utils';
-import { Box } from '@mui/system';
+import { Box, createTheme, ThemeProvider } from '@mui/system';
 
 describe('<Box />', () => {
   const { render } = createRenderer();
@@ -279,4 +279,34 @@ describe('<Box />', () => {
 
     expect(getByTestId('regular-box')).to.have.class('MuiBox-root');
   });
+
+  describe('prop: maxWidth', () => {
+    it('should resolve breakpoints with custom units', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const theme = createTheme({
+        breakpoints: {
+          unit: 'rem',
+          values: {
+            xs: 10,
+          },
+        },
+      });
+
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Box maxWidth="xs" />,
+        </ThemeProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        // 10rem x 16px = 160px
+        maxWidth: '160px',
+      });
+    });
+  });
 });

packages/mui-system/src/sizing.js

@@ -16,8 +16,21 @@ export const maxWidth = (props) => {
     const styleFromPropValue = (propValue) => {
       const breakpoint =
         props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue];
+
+      if (!breakpoint) {
+        return {
+          maxWidth: sizingTransform(propValue),
+        };
+      }
+
+      if (props.theme?.breakpoints?.unit !== 'px') {
+        return {
+          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`,
+        };
+      }
+
       return {
-        maxWidth: breakpoint || sizingTransform(propValue),
+        maxWidth: breakpoint,
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);

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

@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import { createTheme } from '@mui/system';
 import sizing from './sizing';
 
 describe('sizing', () => {
@@ -19,4 +20,26 @@ describe('sizing', () => {
       maxWidth: 0,
     });
   });
+
+  describe('maxWidth', () => {
+    it('should work with custom units', () => {
+      const theme = createTheme({
+        breakpoints: {
+          unit: 'rem',
+          values: {
+            xs: 10,
+          },
+        },
+      });
+
+      const output = sizing({
+        maxWidth: 'xs',
+        theme,
+      });
+
+      expect(output).to.deep.equal({
+        maxWidth: '10rem',
+      });
+    });
+  });
 });

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

@@ -20,11 +20,11 @@ describe('styleFunctionSx', () => {
     breakpoints: {
       keys: ['xs', 'sm', 'md', 'lg', 'xl'],
       values: breakpointsValues,
+      unit: 'px',
       up: (key) => {
         return `@media (min-width:${breakpointsValues[key]}px)`;
       },
     },
-    unit: 'px',
     palette: {
       primary: {
         main: 'rgb(0, 0, 255)',