[typescript] Typography in theme typed as `unknown`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

At the moment the typography key in the system’s theme is typed as unknown:

node_modules/@mui/system/createTheme/createTheme.d.ts

export interface ThemeOptions {
  shape?: ShapeOptions;
  breakpoints?: BreakpointsOptions;
  direction?: Direction;
  mixins?: unknown;
  palette?: Record<string, any>;
  shadows?: unknown;
  spacing?: SpacingOptions;
  transitions?: unknown;
  components?: Record<string, any>;
  typography?: unknown;
  zIndex?: Record<string, number>;
}

Expected behavior 🤔

It should be typed to use TypographyVariants and TypographyVariantOptions or a @mui/system alternative so that we get type safety when using theme.typography like with @mui/material

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

n/a

[johnta0]

Hi @mgoetz-nerdery . I was experiencing the same issue but I could workaround by the code below. In my case theme.transitions didn’t work because its type is ‘unknown’.

...
      transition: (theme.transitions as any).create('width'),
...

[mgoetz-nerdery]

Hi, I am running into this issue now using MUI 5.8.6, even when I try to use module augmentation. I get this error when I try module augmentation:

Subsequent property declarations must have the same type.  Property 'typography' must be of type 'unknown', but here has type 'Typography | undefined'.

Has anyone found a workaround for this issue?