How to add a new variant to MUI's default typography (TypeScript)

Question

This question rose when I was trying out the MUI official instruction here.

1. in file newTheme.ts, customize the primary color, and add a new variant type post:

import { createTheme } from "@mui/material";

const newTheme = createTheme({
  palette: {
    primary: {
      main: "#f00" // red
    }
  },

  // uncommenting caused compiler error:
  // Type '{ poster: { color: string; }; }' is not assignable to type 'TypographyOptions | ((palette: Palette) => TypographyOptions) | undefined'.
  // Object literal may only specify known properties, and 'poster' does not exist in type 'TypographyOptions | ((palette: Palette) => TypographyOptions)'.ts(2322)
  // typography: {
  //   poster: {
  //     color: '#f00',
  //   },
  // },
});

export default newTheme;

2. under the same directory, added a file newTheme.d.ts:

import { ThemeOptions } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
  }
}

I have two problems:

1. received the compiler error if I tried to add in the poster variant
2. the primary color didn't turn red

here is codesandbox

What had I missed?

Answer 1

The code in your question has the following line:

import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

This is importing the v4 version of createTheme. You shouldn't be mixing any @material-ui/* packages (v4) with @mui/* packages (v5). You should be using v5 for everything.

Here's a working example using a custom Typography variant:

demo.tsx

import * as React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

const theme = createTheme({
  typography: {
    subtitle1: {
      fontSize: 12
    },
    body1: {
      fontWeight: 500
    },
    button: {
      fontStyle: "italic"
    },
    poster: {
      color: "red"
    }
  }
});

export default function TypographyVariants() {
  return (
    <div>
      <ThemeProvider theme={theme}>
        <Typography variant="subtitle1">subtitle</Typography>
        <Typography variant="poster">poster</Typography>
        <Typography>body1</Typography>
        <Button>Button</Button>
      </ThemeProvider>
    </div>
  );
}

typography.d.ts

import "@mui/material/styles";
import "@mui/material/Typography";

declare module "@mui/material/styles" {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module "@mui/material/Typography" {
  interface TypographyPropsVariantOverrides {
    poster: true;
  }
}