How to add custom typography variants in React material UI

#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 />
</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


Rate this post


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