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>neveropen</h1> <h2>React MUI Typography Display</h2> </div> <center> <Box sx={{ maxWidth: 800 }}> <Typography variant="h1" gutterBottom> neveropen </Typography> <Typography variant="h2" gutterBottom> neveropen </Typography> <Typography variant="h3" gutterBottom> neveropen </Typography> <Typography variant="h4" gutterBottom> neveropen </Typography> <Typography variant="h5" gutterBottom> neveropen </Typography> <Typography variant="h6" gutterBottom> neveropen </Typography> <Typography variant="subtitle1" gutterBottom> GFG Premium </Typography> <Typography variant="subtitle2" gutterBottom> GFG Premium </Typography> <Typography variant="body1" gutterBottom> neveropen 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> neveropen 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>neveropen</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/
