How to add custom typography variants in React material UI

Last updated on Nov 2, 2021 by Suraj Sharma

In this tutorial, you’ll learn to add custom typography variants in your React Material UI projects

This tutorial supports the React Material UI v5.0 version

To add custom variants in typography, you have to create a new theme object or update an existing theme object to include new typography variants.

Create a theme object

First, create a default theme object using the createTheme method and include your own custom variants inside the typography object.

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

const theme = createTheme({
  typography: {
    bold: {
      fontWeight: 'bold',
    italic: {
      fontWeight: 'italic'

Furthermore you can also override any existing typography by changing the properties of the typography object in the theme

const theme = createTheme({
  typography: {
    h1: {
      fontSize: '23',
    body1: {
      color: 'red'

Pass the theme object to the ThemeProvider

// App.jsx

import { ThemeProvider } from '@mui/material/styles';
import MainComponent from './MainComponent';

const App = () => {
<ThemeProvider theme={theme}>
  <MainComponent />

export default App;

Use the new variants

Pass the variant in the Typography variant property to use the newly created custom variant.

// MainComponent.jsx

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

const MainComponent = () => {
  return (
      <Typography variant="bold">bold text</Typography>
      <Typography variant="italic">italic text</Typography>
      <Typography variant="body1">red body text</Typography>
      <Typography variant="h1">custom h1 font size</Typography>

Related Solutions

Rate this post

Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.