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;

Result

Full source code available on Github