[Dialog] Fix support of custom breakpoint units

mui · Apr 16, 2021 · b1a65cf · b1a65cf
1 parent b3c85de
commit b1a65cf
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
@@ -159,7 +159,7 @@ const DialogPaper = experimentalStyled(
   }),
   /* Styles applied to the Paper component if `maxWidth="sm"`. */
   ...(styleProps.maxWidth === 'sm' && {
-    maxWidth: theme.breakpoints.values.sm,
+    maxWidth: `${theme.breakpoints.values.sm}${theme.breakpoints.unit}`,
     [`&.${dialogClasses.paperScrollBody}`]: {
       [theme.breakpoints.down(theme.breakpoints.values.sm + 32 * 2)]: {
         maxWidth: 'calc(100% - 64px)',
@@ -168,7 +168,7 @@ const DialogPaper = experimentalStyled(
   }),
   /* Styles applied to the Paper component if `maxWidth="md"`. */
   ...(styleProps.maxWidth === 'md' && {
-    maxWidth: theme.breakpoints.values.md,
+    maxWidth: `${theme.breakpoints.values.md}${theme.breakpoints.unit}`,
     [`&.${dialogClasses.paperScrollBody}`]: {
       [theme.breakpoints.down(theme.breakpoints.values.md + 32 * 2)]: {
         maxWidth: 'calc(100% - 64px)',
@@ -177,7 +177,7 @@ const DialogPaper = experimentalStyled(
   }),
   /* Styles applied to the Paper component if `maxWidth="lg"`. */
   ...(styleProps.maxWidth === 'lg' && {
-    maxWidth: theme.breakpoints.values.lg,
+    maxWidth: `${theme.breakpoints.values.lg}${theme.breakpoints.unit}`,
     [`&.${dialogClasses.paperScrollBody}`]: {
       [theme.breakpoints.down(theme.breakpoints.values.lg + 32 * 2)]: {
         maxWidth: 'calc(100% - 64px)',
@@ -186,7 +186,7 @@ const DialogPaper = experimentalStyled(
   }),
   /* Styles applied to the Paper component if `maxWidth="xl"`. */
   ...(styleProps.maxWidth === 'xl' && {
-    maxWidth: theme.breakpoints.values.xl,
+    maxWidth: `${theme.breakpoints.values.xl}${theme.breakpoints.unit}`,
     [`&.${dialogClasses.paperScrollBody}`]: {
       [theme.breakpoints.down(theme.breakpoints.values.xl + 32 * 2)]: {
         maxWidth: 'calc(100% - 64px)',