[備忘録] MUI v5でTypographyに独自のvariantを追加する方法

はじめに

MUI v5でTypographyに独自のvariantを追加する方法を調べたとき、ググるとv4の情報が出てきたりして意外と見つけにくかったのでメモしておきます。

MUIの公式サイトにやり方は書いてありますが、手っ取り早く知りたい人（＝自分）向けに。

追加方法

（例）labelという名前のvariantを追加する場合。

theme.ts

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

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

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

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

const theme = createTheme({
  typography: {
    label: {
      color: "#C03030",
      fontSize: 24,
      fontWeight: "bold",
    },
  },
});

export default theme;

と書いておけば、あとは以下のように使える。

App.tsx

import React from "react";
import { Typography } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../src/theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="label">
        ラベル
      </Typography>
    </ThemeProvider>
  );
};

export default App;