diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js
index 0e0ada802a59b0..0b1808815bd89e 100644
--- a/packages/mui-system/src/Box/Box.test.js
+++ b/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('', () => {
const { render } = createRenderer();
@@ -279,4 +279,34 @@ describe('', () => {
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(
+
+ ,
+ ,
+ );
+
+ expect(container.firstChild).toHaveComputedStyle({
+ // 10rem x 16px = 160px
+ maxWidth: '160px',
+ });
+ });
+ });
});
diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js
index 0454dfb1702845..096a5bf9f85256 100644
--- a/packages/mui-system/src/sizing.js
+++ b/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);
diff --git a/packages/mui-system/src/sizing.test.js b/packages/mui-system/src/sizing.test.js
index 0b5d322043d2ad..fbab61d41fde36 100644
--- a/packages/mui-system/src/sizing.test.js
+++ b/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',
+ });
+ });
+ });
});
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
index 376cc2de5689b1..ba0d89c8fdb8f6 100644
--- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
+++ b/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)',