Material-ui: createBreakpoints does not work with custom variant!

[HashemKhalifa]

When using createBreakpoints with custom typography variant I get
TypeError: Cannot read property '@media (min-width:960px)' of undefined

otherwise, it works perfectly fine with the normal variant like h1,h2, ...etc.

• [ 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 😯

Throwing TypeError: Cannot read property '@media (min-width:960px)' of undefined

Expected Behavior 🤔

to work normaly with custom varaint.

Steps to Reproduce 🕹

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.5.1 |
| React | 16.10.2 |
| Browser | Chrome 78.0.3904.70 |
| TypeScript | none |
| etc. | |

[HashemKhalifa]

import createBreakpoints from "@material-ui/core/styles/createBreakpoints";
const breakpoints = createBreakpoints({});
override:{
MuiTypography:{
        hero:{
          [breakpoints.up('md')]:{
            fontSize: '11rem',
            background: 'red',
          },
          fontSize: '3.75rem',
          lineHeight: '5rem',
          fontWeight: 700
        }
}
}

[oliviertassinari]

createBreakpoints is a private module:

import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme();

theme.overrides = {
  MuiTypography: {
    hero: {
      [theme.breakpoints.up('md')]:{
        fontSize: '11rem',
        background: 'red',
      },
      fontSize: '3.75rem',
      lineHeight: '5rem',
      fontWeight: 700,
    },
  },
};

[HashemKhalifa]

@oliviertassinari the issue still exists, if you are going to use the normal variants like h1,h2,h3,h4, etc everything will be fine.

try to create any new variant like 'hero or test then you get an error Uncaught TypeError: Cannot read property '@media (min-width:960px)' of undefined

[HashemKhalifa]

@oliviertassinari would you kindly try the same example you provided and see if it works?!

[oliviertassinari]

@HashemKhalifa A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[HashemKhalifa]

working example with the normal typography: https://codesandbox.io/s/withworking-version-vcfty

none working example with customized typography: https://codesandbox.io/s/noneworking-mui-typography-version-vcfty

[oliviertassinari]

A valid reproduction: https://codesandbox.io/s/noneworking-mui-typography-version-qpk5l. Thank you.

[oliviertassinari]

The problems seem to come from an older version of deepmerge. I could reproduce the fail with v4.0.0. What version are you using? It seems to be OK in v4.2.1.

No matter what, this problem should be solved with #17982. Wait for the next release of Material-UI: v4.5.2.