How to use Typography Component in ReactJS?

Last Updated : 04 Dec, 2023

Effectively present your design and content with clarity using typography. With Material UI for React, integration is a breeze. Utilize the Typography Component in ReactJS effortlessly by following this straightforward approach.

Prerequisites:

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldernam.

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file

Javascript

import React from "react";
import Typography from "@material-ui/core/Typography";
 
export default function App() {
    return (
        <div style=
            {
                {
                    display: "block",
                    padding: 30
                }
            }>
            <h4>
                How to use Typography
                Component in ReactJS?
            </h4>
            <Typography variant="h4" gutterBottom>
                GeeksforGeeks with
                Typography Component
            </Typography>
            <h4>
                GeeksforGeeks without
                Typography Component
            </h4>
        </div>
    );
}