material-ui: [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

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 4
Comments: 21 (11 by maintainers)

Most upvoted comments

I have the same problem. Through Box and Typography works. But through styled breaks the build of the project.

Please use styled from @mui/material/styles;

- import { styled } from '@mui/system';
+ import { styled } from '@mui/material/styles'; // or '@mui/material'

+12

siriwatknp on Jan 5, 2023

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'),
...

johnta0 on Aug 21, 2022

We could work on this in v6 according to https://github.com/mui/material-ui/discussions/30988.

siriwatknp on Jan 5, 2023

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?

mgoetz-nerdery on Jul 11, 2022

We need to be clear on what package are we talking about but from the MUI system perspective, the typography should be a Record<TypographyScale, CSSObject> where the consumer can extends the TypographyScale via module augmentation.

declare module "@mui/system" {
  interface TypographyScaleOverrides {
    body: CSSObject;
    ...your choice
  }
}

@siriwatknp from Joy’s standpoint, what would work better?

I lean toward module augmentation because:

consistent experience with other MUI packages

It works with system Box whereas generic don’t

// you can directly use Box from the system without the need to call `createBox`
import { Box } from '@mui/system';

// ...module augmentation

// theme will be typed correctly
<Box sx={theme => {...}}>

siriwatknp on Mar 3, 2022

@Nicktho I agree we should improve the typings on these utils. Especially as we envision those would be used in different design systems. We could either, add typings that could be changed by module augmentation, or provide generics.

mnajdova on Mar 2, 2022