How to use Typography Component in ReactJS?
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>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000
Last Updated :
04 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...