[CssBaseline] Fix typings for @global override (#20454)

Author: eps1lon

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

@@ -16,6 +16,9 @@ export interface CssBaselineProps {
  */
 declare const CssBaseline: React.ComponentType<CssBaselineProps>;
 
+/**
+ * @deprecated The name of this type is misleading. `CssBaseline` implements no class at all.
+ */
 export type CssBaselineClassKey = '@global';
 
 export default CssBaseline;

packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx

@@ -0,0 +1,42 @@
+import { createMuiTheme } from '@material-ui/core';
+
+// overrides story
+{
+  // reduced example from
+  // https://github.com/mui-org/material-ui/blob/master/docs/src/pages/customization/typography/typography.md
+  createMuiTheme({
+    overrides: {
+      MuiCssBaseline: {
+        '@global': {
+          '@font-face': [{ fontFamily: 'custom', fontWeight: 600 }],
+        },
+      },
+    },
+  });
+  // assuming "@global" is a class
+  createMuiTheme({
+    overrides: {
+      MuiCssBaseline: {
+        '@global': {
+          // $ExpectError
+          fontWeight: 'bold',
+        },
+      },
+    },
+  });
+  // reset.css
+  createMuiTheme({
+    overrides: {
+      MuiCssBaseline: {
+        '@global': {
+          ul: {
+            'list-style': 'none',
+          },
+          p: {
+            fontWeight: 'bolde', // undesired, should throw
+          },
+        },
+      },
+    },
+  });
+}

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

@@ -1,5 +1,4 @@
-import { StyleRules } from './withStyles';
-
+import { CSSProperties, StyleRules } from './withStyles';
 import { AppBarClassKey } from '../AppBar';
 import { AvatarClassKey } from '../Avatar';
 import { BackdropClassKey } from '../Backdrop';
@@ -21,7 +20,6 @@ import { ChipClassKey } from '../Chip';
 import { CircularProgressClassKey } from '../CircularProgress';
 import { CollapseClassKey } from '../Collapse';
 import { ContainerClassKey } from '../Container';
-import { CssBaselineClassKey } from '../CssBaseline';
 import { DialogActionsClassKey } from '../DialogActions';
 import { DialogClassKey } from '../Dialog';
 import { DialogContentClassKey } from '../DialogContent';
@@ -100,6 +98,12 @@ import { TypographyClassKey } from '../Typography';
 
 export type Overrides = {
   [Name in keyof ComponentNameToClassKey]?: Partial<StyleRules<ComponentNameToClassKey[Name]>>;
+} & {
+  MuiCssBaseline?: {
+    '@global'?: {
+      '@font-face'?: CSSProperties['@font-face'];
+    } & Record<string, CSSProperties['@font-face'] | CSSProperties>; // allow arbitrary selectors
+  };
 };
 
 export interface ComponentNameToClassKey {
@@ -124,7 +128,10 @@ export interface ComponentNameToClassKey {
   MuiCircularProgress: CircularProgressClassKey;
   MuiCollapse: CollapseClassKey;
   MuiContainer: ContainerClassKey;
-  MuiCssBaseline: CssBaselineClassKey;
+  /**
+   * @deprecated See CssBaseline.d.ts
+   */
+  MuiCssBaseline: '@global';
   MuiDialog: DialogClassKey;
   MuiDialogActions: DialogActionsClassKey;
   MuiDialogContent: DialogContentClassKey;