material-ui: CSS Media Queries don't work with Custom breakpoints

If anyone stumbles upon this and doesn’t want to use alpha / wait for full release, you can get around this by manually passing the breakpoint value. For example, instead of theme.breakpoints.down('tablet') write theme.breakpoints.down(theme.breakpoints.values.tablet)

The issue is closed but custom break point still doesn’t work as described in the docs. Also as @oliviertassinari suggested here to try alpha version to see it working I think this must be reflected in the docs as well.

This is still not working for me on v5

This doesn’t work for me: theme.breakpoints.down(theme.breakpoints.values.tablet)

Hello, you need to change the keys too

//Example
const theme = createMuiTheme({

		breakpoints: {
			values: {
				tablet: 640,
				laptop: 1024,
				desktop: 1280
			}
		},
		overrides: {
			MuiCssBaseline: {
				'@global': {
					body: {
						overflow: 'hidden'
					}
				}
			}
		},
		palette: {
			type: 'dark',
			primary: {
				light: '#C2C2C3',
				main: '#323338',
				dark: '#131417'
			},
			secondary: {
				light: '#B8E1D9',
				main: '#129B7F',
				dark: '#056D4F',
				contrastText: '#FFFFFF'
			},
			background: {
				paper: '#262526',
				default: '#1E1D1E'
			},
			error: red
		},
		status: {
			danger: 'orange'
		}
	});

Hello, am I right in saying this isn’t fixed still in v4? The comments on the last closure indicate you are just supporting it for 5?

@alanszp Yes, a pull request would be great.

I’m trying to use the custom key breakpoints on the <Container maxWidth="tablet"/>.

@TheAussieStew Could you open a new issue for this case? We have done our best to handle custom breakpoints, but the API is large, we forgot a few.

It seems that we could make it work with:

diff --git a/packages/material-ui/src/Container/Container.d.ts b/packages/material-ui/src/Container/Container.d.ts
index 2049acda0e..2552905e7c 100644
--- a/packages/material-ui/src/Container/Container.d.ts
+++ b/packages/material-ui/src/Container/Container.d.ts
@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@material-ui/system';
 import { Theme } from '../styles';
+import { Breakpoints } from '../styles/createBreakpoints';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';

+export type BreakpointsKeys = keyof Breakpoints['values'];
+
 export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     children?: React.ReactNode;
@@ -46,7 +49,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?: BreakpointsKeys | false;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
index 74dce02f09..aab6ebc70c 100644
--- a/packages/material-ui/src/Container/Container.js
+++ b/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(['lg', 'md', 'sm', 'xl', 'xs']),
+    PropTypes.string,
+  ]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

import * as React from 'react';
import { Container, ThemeProvider, createTheme } from '@material-ui/core';

declare module '@material-ui/core/styles' {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    tablet: true; // adds the `tablet` breakpoint
    laptop: true;
    desktop: true;
  }
}

const theme = createTheme({
  breakpoints: {
    values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
  components: {
    MuiContainer:{
      defaultProps: {
        maxWidth: 'laptop',
      },
    },
  },
});

export default () => (
  <ThemeProvider theme={theme}>
    hello
    <Container maxWidth="tablet">
      yooo
    </Container>
  </ThemeProvider>
);