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

[nkrivous]

According to the documentation, we can create custom breakpoints::

const theme = createMuiTheme({
  breakpoints: {
    values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
});

But CSS Media Queries don't understand these new values

theme.breakpoints.up(key)
theme.breakpoints.down(key)
theme.breakpoints.only(key)
theme.breakpoints.between(start, end)

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The following code

   [theme.breakpoints.down("laptop")]: {
      padding: "10px",
    },

produces the next css

@media (max-width:NaNpx) {
  .makeStyles-root-5 {
    padding: 10px;
  }
}

Context 🔦

I think the reason is in the wrong function createBreakpoints.js because we never update an array of keys.
It should be smth like that

export const predefinedKeys = ['xs', 'sm', 'md', 'lg', 'xl'];

// Keep in mind that @media is inclusive by the CSS specification.
export default function createBreakpoints(breakpoints) {
  const {
    // The breakpoint **start** at this value.
    // For instance with the first breakpoint xs: [xs, sm[.
    values = {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
    unit = 'px',
    step = 5,
    keys = predefinedKeys,
    ...other
  } = breakpoints;
}

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| React | v16.13.1 |

[oliviertassinari]

Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[oliviertassinari]

I confirm the issue: https://codesandbox.io/s/material-demo-416qt?file=/demo.js

[oliviertassinari]

@nkrivous What do you think of this fix? Do you want to work on a pull request? :) We would also need to add tests:

diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
index b961863c7..e72b304c0 100644
--- a/packages/material-ui/src/styles/createBreakpoints.js
+++ b/packages/material-ui/src/styles/createBreakpoints.js
@@ -1,6 +1,6 @@
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];

 // Keep in mind that @media is inclusive by the CSS specification.
 export default function createBreakpoints(breakpoints) {
@@ -19,6 +19,8 @@ export default function createBreakpoints(breakpoints) {
     ...other
   } = breakpoints;

+  const keys = Object.keys(values);
+
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (min-width:${value}${unit})`;
@@ -29,8 +31,8 @@ export default function createBreakpoints(breakpoints) {
     const upperbound = values[keys[endIndex]];

     if (endIndex === keys.length) {
-      // xl down applies to all sizes
-      return up('xs');
+      // end index down applies to all sizes
+      return '@media (min-width:0px)';
     }

     const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js
index 542dc37d6..04d081ab7 100644
--- a/packages/material-ui/src/withWidth/withWidth.js
+++ b/packages/material-ui/src/withWidth/withWidth.js
@@ -4,7 +4,7 @@ import { getDisplayName } from '@material-ui/utils';
 import { getThemeProps } from '@material-ui/styles';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import useTheme from '../styles/useTheme';
-import { keys as breakpointKeys } from '../styles/createBreakpoints';
+import { breakpointKeys } from '../styles/createBreakpoints';
 import useMediaQuery from '../useMediaQuery';

 // By default, returns true if screen width is the same or greater than the given breakpoint.

[nkrivous]

@oliviertassinari Thanks for the fast response. I like your fix and I'm going to work on a PR. I looked at the mui code base and noticed that in some components breakpoints are hardcoded.
For example, Tooltip, Toolbar, Tabs, and many others contain the line [theme.breakpoints.up('sm')]: {..}
Even in your fix in the file withWidth.js we refer to predefined breakpoints, not the theme.

Can we solve the problem globally?

1. Maybe instead of overriding breakpoints, we can use aliases for the first 5, and be able to expand this list? This means that we will have at least 5 breakpoints, and we should not change the existing logic.

alias: {
     tablet: ['xs', 'sm'],
     laptop: ['md', 'lg',],
     desktop: ['xl', 'xxl'],
},
values = {
     ...prdefinedValues,
      xxl: 2560,
},

1. We can allow the redefinition of breakpoints. But in this case, we should not refer to predefined points in the codebase. We must remove the incompatible propTypes and other hardcoded strings.

We also should remember about components that receive breakpoints in their props: xs={12} />

Anyway, I will start with fixing the current bug.

[oliviertassinari]

noticed that in some components breakpoints are hardcoded

Oh right, I have overlooked this aspect. Would it work for you if you still have to include the xs, sm, md, xl, lg values?

Also, shouldn't we warn if a key is provided to the breakpoint methods but not supported in the theme?

We also should remember about components that receive breakpoints in their props:

This is a different problem, I would include it as part of #6140.

[nkrivous]

Would it work for you if you still have to include the xs, sm, md, xl, lg values?

As a workaround, this works. But, as a consumer of the API, I don't want to have old values if you give me the opportunity to override something.

Also, shouldn't we warn if a key is provided to the breakpoint methods but not supported in the theme?

Modern frontend developers use TypeScript, which does not allow them to pass not supported values :)

[Guneetgstar]

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.

[HimanshuMamodiya]

@oliviertassinari
I am using the same way as mentioned in the docs, with alpha version . still I am not able to access . I have tried by providing keys as well . Any help will be appreciable.

const theme = createMuiTheme({
breakpoints: {
values: {
xs: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
},
},
});

@Guneetgstar are you able to apply custom break point now . if yes would you please share demo code sandbox link .

[oliviertassinari]

@HimanshuMamodiya Do you have a reproduction on codesandbox with v5.0.0-alpha.10?

[HimanshuMamodiya]

@oliviertassinari , actually that break-point is giving the value , but value is not applicable in the div it is still taking the other value.
https://codesandbox.io/s/material-demo-forked-jq49k?file=/demo.js:357-359
const theme = createMuiTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 700,
ipadl: 900,
lg: 1025
}
}
});

I am not able to post actual code but tried to recreate the scenario. In this my code is still using md breakpoint rather than using ipadl for ipad-landscape mode.

[C5H8NNaO4]

This still doesn't seem to be working with grids. The only work-around I found was to use the useWidth hook to augment the xl property of the grid. It would be great if grids would support the custom breakpoints as I'm used to extra-wide monitors.

Edit: The <Hidden> component also doesn't seem to support custom breakpoints.

const width = useWidth();
<Grid item sm={12} lg={6} xl={width=='xxl'?3:6}>
    <Widget symbol={symbol}/>
</Grid>

[oliviertassinari]

@C5H8NNaO4 I think that #6140 should cover custom breakpoints, see #21589.