[Container] Fix support for custom breakpoints

docs/pages/api-docs/container.json

@@ -6,8 +6,8 @@
     "fixed": { "type": { "name": "bool" } },
     "maxWidth": {
       "type": {
-        "name": "enum",
-        "description": "'lg'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;'xs'<br>&#124;&nbsp;false"
+        "name": "union",
+        "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
       },
       "default": "'lg'"
     },

packages/material-ui/src/Container/Container.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@material-ui/system';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { Breakpoint } from '../styles/createBreakpoints';
 import { ContainerClasses } from './containerClasses';
 
 export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
@@ -30,7 +31,7 @@ export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * Set to `false` to disable `maxWidth`.
      * @default 'lg'
      */
-    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+    maxWidth?: Breakpoint | false;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

packages/material-ui/src/Container/Container.js

@@ -155,7 +155,10 @@ Container.propTypes /* remove-proptypes */ = {
    * Set to `false` to disable `maxWidth`.
    * @default 'lg'
    */
-  maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+  maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
+    PropTypes.string,
+  ]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/material-ui/test/typescript/moduleAugmentation/breakpointsOverrides.spec.ts → packages/material-ui/test/typescript/moduleAugmentation/breakpointsOverrides.spec.tsx

@@ -1,4 +1,6 @@
-import { createTheme } from '@material-ui/core/styles';
+import * as React from 'react';
+import Container from '@material-ui/core/Container';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 
 // testing docs/src/pages/customization/breakpoints/breakpoints.md
 
@@ -16,7 +18,7 @@ declare module '@material-ui/core/styles' {
   }
 }
 
-createTheme({
+const theme = createTheme({
   breakpoints: {
     values: {
       mobile: 0,
@@ -25,4 +27,20 @@ createTheme({
       desktop: 1280,
     },
   },
+  components: {
+    MuiContainer: {
+      defaultProps: {
+        maxWidth: 'laptop',
+      },
+    },
+  },
 });
+
+function MyContainer() {
+  return (
+    <ThemeProvider theme={theme}>
+      hello
+      <Container maxWidth="tablet">yooo</Container>
+    </ThemeProvider>
+  );
+}

packages/material-ui/test/typescript/moduleAugmentation/breakpointsOverrides.tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../../../tsconfig",
-  "files": ["breakpointsOverrides.spec.ts"]
+  "files": ["breakpointsOverrides.spec.tsx"]
 }