React MUI Typography Display

React MUI是一个UI库，提供了功能齐全的组件，将我们自己的设计系统带入到我们的生产就绪组件中。MUI是一个用户界面库，为快速和简单的Web开发提供了预定义和可定制的React组件，这些Material-UI组件基于谷歌的Material Design。

在本文中，我们将讨论React MUI Typography Display。我们使用排版来展示我们的设计和内容，以便查看者可以看到内容在展示什么。可以向任何布局中添加许多类型和样式。

排版内容：

一般： 除了Roboto字体之外，所有字体都可以在排版中使用。
Roboto字体CDN： 可以使用CDN来安装Roboto字体。
使用npm安装： 使用npm命令安装Roboto字体。
组件： 使用Typography组件应用默认的字重和大小。
主题： 有时您可能无法在此时使用Typography组件，可以使用主题的排版键。
更改语义元素： variantMapping属性用于将UI变体与语义元素关联起来。
添加和禁用变体： 我们可以添加自定义排版，或者如果不需要的话可以禁用任何排版。
系统属性： 排版支持所有系统属性或属性。
可访问性： 颜色、字体大小和标题层次结构等关键因素在可访问性中起重要作用。
API： 所使用的API是<Typography />。

语法：

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

创建React项目：

步骤1: 通过npm命令安装react模块来创建一个react应用。

npm create-react-app project name

步骤2： 创建完成React项目后，进入该文件夹进行不同操作。

cd project name

步骤3： 创建 ReactJS 应用程序后，使用以下命令安装所需模块：

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

项目结构：

React MUI Typography Display

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

示例1： 下面的示例演示了React MUI的Typography组件。在给定的示例中，我们演示了Typography组件使用默认的字重和字体大小。

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;

输出：

React MUI Typography Display

示例2： 下面的示例演示了React MUI的字体主题。有时候我们可能无法使用字体组件，所以为了处理这个问题，我们使用主题的字体键。

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;