How To Add Custom Typography Variants In Material UI v5.1.0
Tags: materialui, typography, react, javascript
Published: 2021-11-25 12:01:21

I found that Material UI has [13 different variants](https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/styles/createTypography.js#L61) 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
```bash
npx create-react-app my-app
cd my-app
npm start
```
## Install Material UI
```bash
// 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
```bash 
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
```bash
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
```bash
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
![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov0ckh81yh6cdxh1ltql.png)
 
  
Full source code available on [Github](https://github.com/jasurkurbanovinit/mui-custom-typography)