How To Add Custom Typography Variants In Material UI v5.1.0

I found that Material UI has 13 different variants for Typography component. While doing project at company I am working I came across with problem, where I need it to add extra Typography variant. In this tutorial, I will show you how to add extra Typography variants in Material UI.

Material UI version 5.1.0 supported in this tutorial.

Create New React Project

npx create-react-app my-app
cd my-app
npm start

Install Material UI

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Setup theme

Let's create our theme with our extra typographies

theme.js

export const theme = createTheme({
  typography: {
    body1_medium: {
      lineHeight: 1.6,
      fontSize: 24,
      fontWeight: 500,
    },
    body2_medium: {
      lineHeight: 1.6,
      fontSize: 18,
      fontWeight: 500,
    },
    p1_italic: {
      lineHeight: 2.6,
      fontSize: 26,
      fontStyle: "italic",
      fontWeight: 800,
    },
    p1_bold: {
      lineHeight: 2.6,
      fontSize: 22,
      fontStyle: "bold",
      fontWeight: 700,
    },
    p1_error: {
      fontStyle: "bold",
      fontWeight: 300,
      color: "red",
    },
    p2_highlighted: {
      fontStyle: "italic",
      fontWeight: 500,
      backgroundColor: "yellow",
    },
  },
});

ATTENTION
I am only showing you to add extra Typography variants, that's why I won't be touching default Typography variants. Variant names are just for demonstration purposes

Add your custom theme to ThemeProvider

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "./theme";

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

Usage

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

function App() {
  return (
    <div className="App">
      <Typography variant="body1_medium">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="body2_medium">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p1_error">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p1_italic">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p2_bold">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p2_highlighted">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
    </div>
  );
}

export default App;