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

Author: espipj

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}`,
     },
   },
 });

packages/material-ui/src/styles/createBreakpoints.js

@@ -67,6 +67,7 @@ export default function createBreakpoints(breakpoints) {
     between,
     only,
     width,
+    unit,
     ...other,
   };
 }