diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts b/packages/material-ui/src/CssBaseline/CssBaseline.d.ts index d4d8bdaa5f36a0..c01475e1eccabc 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts +++ b/packages/material-ui/src/CssBaseline/CssBaseline.d.ts @@ -16,6 +16,9 @@ export interface CssBaselineProps { */ declare const CssBaseline: React.ComponentType; +/** + * @deprecated The name of this type is misleading. `CssBaseline` implements no class at all. + */ export type CssBaselineClassKey = '@global'; export default CssBaseline; diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx b/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx new file mode 100644 index 00000000000000..c4eb765f3d2ba0 --- /dev/null +++ b/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 + }, + }, + }, + }, + }); +} diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts index 8a35b9333e6f7e..fe4dab79ef0906 100644 --- a/packages/material-ui/src/styles/overrides.d.ts +++ b/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>; +} & { + MuiCssBaseline?: { + '@global'?: { + '@font-face'?: CSSProperties['@font-face']; + } & Record; // 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;