Breakpoints override fails in .tsx files

[cooperate]

Overriding breakpoints through createMuiTheme fails in typescript files.

Current Behavior 😯

Typescript throws
Argument of type '"xlg"' is not assignable to parameter of type 'number | "xs" | "sm" | "md" | "lg" | "xl"'.ts(2345)
when breakpoint has been overridden correctly.

Expected Behavior 🤔

Breakpoint should override in makeStyles.

Steps to Reproduce 🕹

createMuiTheme function
createMuiTheme({ breakpoints: { keys: ["xs", "sm", "md", "lg", "xlg", "xl"], values: { xs: 0, sm: 600, md: 960, lg: 1280, xlg: 1872, xl: 1920 } },

use in makeStyles
[theme.breakpoints.down("xlg")]: { content: 'Screen size = xlg' },

xlg throws error in vscode.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.2
TypeScript	v3.6.3

[oliviertassinari]

You need to augment the theme: https://material-ui.com/guides/typescript/#customization-of-theme.

[JasonHK]

You need to augment the theme: https://material-ui.com/guides/typescript/#customization-of-theme.

@oliviertassinari Sorry, but module augmentation is not possible since type keyword is not overridable.

declare module "@material-ui/core/styles/createBreakpoints"
{
    export type Breakpoint = "xs" | "sm" | "md" | "lg"; 
}

The above module augmentation will throw the following error:

Duplicate identifier 'Breakpoint'. ts(2300)
createBreakpoints.d.ts(1, 13): 'Breakpoint' was also declared here.

[oliviertassinari]

I guess that in this case, you could need to augment Breakpoints. Do you have any solution in mind? We recently had a similar concern in #20212.

[JasonHK]

I guess that in this case, you could need to augment Breakpoints. Do you have any solution in mind? We recently had a similar concern in #20212.

@oliviertassinari I've come up a way to fix this in #20901.