add breakpoint value support to maxWidth

mui · Jun 27, 2021 · 2c28a6d · 2c28a6d
1 parent 45950ec
commit 2c28a6d
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/packages/material-ui-system/src/sizing.js b/packages/material-ui-system/src/sizing.js
@@ -1,5 +1,6 @@
 import style from './style';
 import compose from './compose';
+import { handleBreakpoints } from './breakpoints';
 
 function transform(value) {
   return value <= 1 ? `${value * 100}%` : value;
@@ -10,10 +11,19 @@ export const width = style({
   transform,
 });
 
-export const maxWidth = style({
-  prop: 'maxWidth',
-  transform,
-});
+export const maxWidth = (props) => {
+  if (props.maxWidth) {
+    const styleFromPropValue = (propValue) => {
+      const breakpoint = props.theme.breakpoints.values[propValue];
+      return {
+        maxWidth: breakpoint || transform(propValue),
+      };
+    };
+    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
+  }
+  return null;
+};
+maxWidth.filterProps = ['maxWidth'];
 
 export const minWidth = style({
   prop: 'minWidth',