DEV Community

Cover image for How To Add Custom Typography Variants In  Material UI v5.1.0
Jasur Kurbanov
Jasur Kurbanov

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Install Material UI

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

// with yarn
yarn add @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

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",
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

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")
);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Result

Result

Full source code available on Github

Discussion (0)