[Container] Fix support of custom breakpoint units (#23191)

mui · Oct 21, 2020 · c60fbba · c60fbba
1 parent 64629bd
commit c60fbba
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
@@ -30,39 +30,39 @@ export const styles = (theme) => ({
 
     if (value !== 0) {
       acc[theme.breakpoints.up(breakpoint)] = {
-        maxWidth: value,
+        maxWidth: `${value}${theme.breakpoints.unit}`,
       };
     }
     return acc;
   }, {}),
   /* Styles applied to the root element if `maxWidth="xs"`. */
   maxWidthXs: {
     [theme.breakpoints.up('xs')]: {
-      maxWidth: Math.max(theme.breakpoints.values.xs, 444),
+      maxWidth: Math.max(`${theme.breakpoints.values.xs}${theme.breakpoints.unit}`, 444),
     },
   },
   /* Styles applied to the root element if `maxWidth="sm"`. */
   maxWidthSm: {
     [theme.breakpoints.up('sm')]: {
-      maxWidth: theme.breakpoints.values.sm,
+      maxWidth: `${theme.breakpoints.values.sm}${theme.breakpoints.unit}`,
     },
   },
   /* Styles applied to the root element if `maxWidth="md"`. */
   maxWidthMd: {
     [theme.breakpoints.up('md')]: {
-      maxWidth: theme.breakpoints.values.md,
+      maxWidth: `${theme.breakpoints.values.md}${theme.breakpoints.unit}`,
     },
   },
   /* Styles applied to the root element if `maxWidth="lg"`. */
   maxWidthLg: {
     [theme.breakpoints.up('lg')]: {
-      maxWidth: theme.breakpoints.values.lg,
+      maxWidth: `${theme.breakpoints.values.lg}${theme.breakpoints.unit}`,
     },
   },
   /* Styles applied to the root element if `maxWidth="xl"`. */
   maxWidthXl: {
     [theme.breakpoints.up('xl')]: {
-      maxWidth: theme.breakpoints.values.xl,
+      maxWidth: `${theme.breakpoints.values.xl}${theme.breakpoints.unit}`,
     },
   },
 });

diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
@@ -67,6 +67,7 @@ export default function createBreakpoints(breakpoints) {
     between,
     only,
     width,
+    unit,
     ...other,
   };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,6 +67,7 @@ export default function createBreakpoints(breakpoints) { @@
         between,
         only,
         width,
+        unit,
         ...other,
       };
     }