From 2c28a6d2cadf09565817ff57d7c1856da54f0f88 Mon Sep 17 00:00:00 2001
From: Ansh Saini <anshsaini625@gmail.com>
Date: Sun, 27 Jun 2021 16:57:31 +0530
Subject: [PATCH] add breakpoint value support to maxWidth

---
 packages/material-ui-system/src/sizing.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui-system/src/sizing.js b/packages/material-ui-system/src/sizing.js
index f957b440be3125..76312de54f22ea 100644
--- 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',