How to add or disable MUI's theme typography font weight options using TypeScript?

Question

I would like to know how to add a new font weight to the theme e.g. fontWeightSemiBold and disable fontWeightLight and fontWeightMedium. This should be feasible with module augmentation. There's an example for Typography's variants here. Ideally, I want to define it in my theme

export const theme = createTheme({
  typography: {
    fontWeightSemiBold: 600,
  },
});

and be able to use it in JSX without TypeScript complaining

<Typography sx={{ fontWeight: 'fontWeightSemiBold' }}>Hello</Typography> 

Answer 1

You need to use module augmentation and change the createTypography module.

declare module '@mui/material/styles/createTypography' {
  interface TypographyOptions {
    fontWeightSemiBold?: number
  }

  interface Typography {
    fontWeightSemiBold: number
  }
}