How to add custom typography variants in React material UI

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 />
</ThemeProvider>
}

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 (
    <div>
      <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>
    </div>
  )
}

Related Solutions

• How to use Material UI icons in React Material UI

• How to add multiple class names in React Material UI

• How to change font family of typography in React Material UI

• How to detect dark mode theme in React Material UI

• How to create a custom theme in React Material UI