[core] Fix TypographyStyle not allowing media queries and allowing un…

…safe undefined access (#19269)

docs/src/pages/customization/typography/CustomResponsiveFontSizes.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+const theme = createMuiTheme();
+
+theme.typography.h3 = {
+  fontSize: '1.2rem',
+  '@media (min-width:600px)': {
+    fontSize: '1.5rem',
+  },
+  [theme.breakpoints.up('md')]: {
+    fontSize: '2rem',
+  },
+};
+
+export default function ResponsiveFontSizes() {
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <Typography variant="h3">Responsive h3</Typography>
+      </ThemeProvider>
+    </div>
+  );
+}

docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+const theme = createMuiTheme();
+
+theme.typography.h3 = {
+  fontSize: '1.2rem',
+  '@media (min-width:600px)': {
+    fontSize: '1.5rem',
+  },
+  [theme.breakpoints.up('md')]: {
+    fontSize: '2rem',
+  },
+};
+
+export default function ResponsiveFontSizes() {
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <Typography variant="h3">Responsive h3</Typography>
+      </ThemeProvider>
+    </div>
+  );
+}

docs/src/pages/customization/typography/typography.md

@@ -32,7 +32,7 @@ const theme = createMuiTheme({
 To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
 
 ⚠️ This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and
-`woff2` files. Fonts will *not* be embedded within your bundle. They will be loaded from your webserver instead of a
+`woff2` files. Fonts will _not_ be embedded within your bundle. They will be loaded from your webserver instead of a
 CDN.
 
 ```js
@@ -48,7 +48,8 @@ const raleway = {
     local('Raleway-Regular'),
     url(${RalewayWoff2}) format('woff2')
   `,
-  unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
+  unicodeRange:
+    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
 };
 ```
 
@@ -73,7 +74,7 @@ const theme = createMuiTheme({
 <ThemeProvider theme={theme}>
   <CssBaseline />
   {children}
-</ThemeProvider>
+</ThemeProvider>;
 ```
 
 ## Font size
@@ -100,6 +101,7 @@ const theme = createMuiTheme({
 The computed font size by the browser follows this mathematical equation:
 
 ![font-size](/static/images/font-size.gif)
+
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
 
 ### HTML font size
@@ -124,7 +126,7 @@ html {
 }
 ```
 
-*You need to apply the above CSS on the html element of this page to see the below demo rendered correctly*
+_You need to apply the above CSS on the html element of this page to see the below demo rendered correctly_
 
 {{"demo": "pages/customization/typography/FontSizeTheme.js"}}
 
@@ -136,17 +138,19 @@ You can use [media queries](/customization/breakpoints/#api) inside them:
 ```js
 const theme = createMuiTheme();
 
-theme.typography.h1 = {
-  fontSize: '3rem',
+theme.typography.h3 = {
+  fontSize: '1.2rem',
   '@media (min-width:600px)': {
-    fontSize: '4.5rem',
+    fontSize: '1.5rem',
   },
   [theme.breakpoints.up('md')]: {
-    fontSize: '6rem',
+    fontSize: '2.4rem',
   },
 };
 ```
 
+{{"demo": "pages/customization/typography/CustomResponsiveFontSizes.js"}}
+
 To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
 
 {{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}

packages/material-ui/src/Typography/Typography.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
 import { OverrideProps, OverridableTypeMap, OverridableComponent } from '../OverridableComponent';
-import { ThemeStyle } from '../styles/createTypography';
+import { Variant as ThemeVariant } from '../styles/createTypography';
 
-type Style = ThemeStyle | 'srOnly';
+type Variant = ThemeVariant | 'srOnly';
 
 export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'> {
   props: P & {
@@ -20,8 +20,8 @@ export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'>
     gutterBottom?: boolean;
     noWrap?: boolean;
     paragraph?: boolean;
-    variant?: Style | 'inherit';
-    variantMapping?: Partial<Record<Style, string>>;
+    variant?: Variant | 'inherit';
+    variantMapping?: Partial<Record<Variant, string>>;
   };
   defaultComponent: D;
   classKey: TypographyClassKey;

packages/material-ui/src/styles/createTypography.d.ts

@@ -1,7 +1,7 @@
 import { Palette } from './createPalette';
 import { CSSProperties } from './withStyles';
 
-export type ThemeStyle =
+export type Variant =
   | 'h1'
   | 'h2'
   | 'h3'
@@ -31,24 +31,20 @@ export interface FontStyleOptions extends Partial<FontStyle> {
   allVariants?: CSSProperties;
 }
 
-export type TypographyStyle = Required<
-  Pick<CSSProperties, 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'color'>
-> &
-  Partial<Pick<CSSProperties, 'letterSpacing' | 'lineHeight' | 'textTransform'>>;
-
-export interface TypographyStyleOptions extends Partial<TypographyStyle> {}
+// TODO: which one should actually be allowed to be subject to module augmentation?
+// current type vs interface decision is kept for historical reasons until we
+// made a decision
+export type TypographyStyle = CSSProperties;
+export interface TypographyStyleOptions extends TypographyStyle {}
 
 export interface TypographyUtils {
   pxToRem: (px: number) => string;
 }
 
-export interface Typography
-  extends Record<ThemeStyle, TypographyStyle>,
-    FontStyle,
-    TypographyUtils {}
+export interface Typography extends Record<Variant, TypographyStyle>, FontStyle, TypographyUtils {}
 
 export interface TypographyOptions
-  extends Partial<Record<ThemeStyle, TypographyStyleOptions> & FontStyleOptions> {}
+  extends Partial<Record<Variant, TypographyStyleOptions> & FontStyleOptions> {}
 
 export default function createTypography(
   palette: Palette,

packages/material-ui/src/styles/createTypography.spec.ts

@@ -0,0 +1,15 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+{
+  // properties of the variants can be "unset"
+  const theme = createMuiTheme({
+    typography: {
+      allVariants: {
+        fontStyle: undefined,
+      },
+    },
+  });
+
+  // $ExpectType string | undefined
+  const maybeFontStyle = theme.typography.body1.fontStyle;
+}

packages/material-ui/src/styles/responsiveFontSizes.d.ts

@@ -1,12 +1,12 @@
 import { Theme } from './createMuiTheme';
 import { Breakpoint } from './createBreakpoints';
-import { ThemeStyle } from './createTypography';
+import { Variant } from './createTypography';
 
 export interface ResponsiveFontSizesOptions {
   breakpoints?: Breakpoint[];
   disableAlign?: boolean;
   factor?: number;
-  variants?: ThemeStyle[];
+  variants?: Variant[];
 }
 
 export default function responsiveFontSizes(