CSS Media Queries don't work with Custom breakpoints

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)

• The issue is present in the latest release.
• 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

[acdoussan]

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)

[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.