Property ''@font-face'' is incompatible with index signature.

I’m using the material ui createStyles and try to inject the complete styles of body1.

const useStyles = makeStyles()((theme) => ({
  root: {
    ...theme.typography.body1,
  },
}))

This will however give an error:

Argument of type '(theme: Theme) => { root: { backgroundColor: string; '@font-face'?: Fontface | Fontface[] | undefined; accentColor?: AccentColor | undefined; ... 783 more ...; vectorEffect?: VectorEffect | undefined; }; }' is not assignable to parameter of type 'Record<"root", CSSObject> | ((theme: Theme, params: void, classes: Record<never, string>) => Record<"root", CSSObject>)'.
  Type '(theme: Theme) => { root: { backgroundColor: string; '@font-face'?: Fontface | Fontface[] | undefined; accentColor?: AccentColor | undefined; ... 783 more ...; vectorEffect?: VectorEffect | undefined; }; }' is not assignable to type '(theme: Theme, params: void, classes: Record<never, string>) => Record<"root", CSSObject>'.
    Call signature return types '{ root: { backgroundColor: string; '@font-face'?: Fontface | Fontface[] | undefined; accentColor?: AccentColor | undefined; alignContent?: AlignContent | undefined; ... 782 more ...; vectorEffect?: VectorEffect | undefined; }; }' and 'Record<"root", CSSObject>' are incompatible.
      The types of 'root' are incompatible between these types.
        Type '{ backgroundColor: string; '@font-face'?: Fontface | Fontface[] | undefined; accentColor?: Property.AccentColor | undefined; alignContent?: Property.AlignContent | undefined; ... 782 more ...; vectorEffect?: Property.VectorEffect | undefined; }' is not assignable to type 'CSSObject'.
          Property ''@font-face'' is incompatible with index signature.
            Type 'Fontface | Fontface[]' is not assignable to type 'CSSInterpolation'.
              Type 'Fontface' is not assignable to type 'CSSInterpolation'.
                Type 'Fontface' is not assignable to type 'CSSObject'.
                  Index signature for type 'string' is missing in type 'FontFace<0 | (string & {}), string & {}> & { fallbacks?: FontFace<0 | (string & {}), string & {}>[] | undefined; }'.ts(2345)

I’ve ran into this issue in another situation in the past and in that case it was a version mismatch with csstype, but I’ve tripple checked but this doesn’t seem to be the case.

It is because of this line in Material UI, if I temporarily comment this out, it wont throw the error: https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/styles/createTypography.d.ts#L38

[paales]

Created a minimal helper function to solve the issue:

export function typography(theme: Theme, key: keyof Theme['typography']): CSSObject {
  return theme.typography[key] as CSSObject
}

Using it like this:

const useStyles = makeStyles()((theme) => ({
  root: {
    ...typography(theme, 'body1')
  },
}))

[paales]

Which happens here as well by the way: https://github.com/mui-org/material-ui/blob/259952855e31dfde8c9daa3d7d00f6d88e35f27b/packages/mui-styled-engine/src/index.d.ts#L27-L29