React MUI Typography Display

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Typography Display. We use typography to present our design and content so that the viewer can see what the content is demonstrating. There are many types of sizes and styles that can be added to any layout.

Typography content:

• General: All fonts are accessible in typography except for the Roboto font.
• Roboto Font CDN: The CDN can be used to install the roboto font.
• Install with npm: The Roboto font is installed with the npm command.
• Component: The Typography component is used to apply a default set of font weights and sizes.
• Theme: Sometimes you might not be able to use the Typography component at that time you may use the typography keys of the theme.
• Changing the semantic element: The variantMapping prop is used to associate a UI variant with a semantic element.
• Adding & disabling variants: We can add custom typography, or disable any if not needed.
• System props: The typography supports all the system props or properties.
• Accessibility: A few key factors like color, font size, and heading hierarchy plays the role in accessibility.
• API: The used API is <Typography />.

Syntax:

<Typography variant="h1">
    ...
</Typography>

Creating React Project:

Step 1: To create a react app, you need to install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application: Open the terminal and type the following command. 

npm start

Example 1: Below example demonstrates the React MUI typography component. In the given example, we have demonstrated the typography component with a default set of font weights and sizes.

Javascript

import React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Typography Display</h2>
            </div>
            <center>
                <Box sx={{ maxWidth: 800 }}>
                    <Typography variant="h1" gutterBottom>
                        GeeksforGeeks
                    </Typography>
                    <Typography variant="h2" gutterBottom>
                        GeeksforGeeks
                    </Typography>
                    <Typography variant="h3" gutterBottom>
                        GeeksforGeeks
                    </Typography>
                    <Typography variant="h4" gutterBottom>
                        GeeksforGeeks
                    </Typography>
                    <Typography variant="h5" gutterBottom>
                        GeeksforGeeks
                    </Typography>
                    <Typography variant="h6" gutterBottom>
                        GeeksforGeeks
                    </Typography>
                    <Typography variant="subtitle1" gutterBottom>
                        GFG Premium
                    </Typography>
                    <Typography variant="subtitle2" gutterBottom>
                        GFG Premium
                    </Typography>
                    <Typography variant="body1" gutterBottom>
                        GeeksforGeeks provides Free Tutorials,
                        Millions of Articles, Live, Online and
                        Classroom Courses ,Frequent Coding
                        Competitions ,Webinars by Industry
                        Experts, Internship opportunities
                        and Job Opportunities.
                    </Typography>
                    <Typography variant="body2" gutterBottom>
                        GeeksforGeeks provides Free Tutorials,
                        Millions of Articles, Live, Online and
                        Classroom Courses ,Frequent Coding
                        Competitions ,Webinars by Industry
                        Experts, Internship opportunities
                        and Job Opportunities.
                    </Typography>
                    <Typography variant="button"
                        display="block" gutterBottom>
                        button
                    </Typography>
                    <Typography variant="caption"
                        display="block" gutterBottom>
                        caption
                    </Typography>
                    <Typography variant="overline"
                        display="block" gutterBottom>
                        Overline
                    </Typography>
                </Box>
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI typography theme. Sometimes we might not be able to use a typography component, so to handle that, we use typography keys of the theme.

Javascript

import React from "react";
import { styled } from '@mui/material/styles';

const Container = styled('div')(({ theme }) => ({
    ...theme.typography.overline,
    backgroundColor: theme.palette.background.success,
    padding: theme.spacing(3),
}));


function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Typography Display</h2>
            </div>
            <center>
                <Container>{"This text is same as that
                    of a overline text."}</Container>
            </center>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-typography/