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
项目结构:
运行应用程序的步骤: 打开终端并输入以下命令。
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;
输出:
示例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;
输出:
参考: https://mui.com/material-ui/react-typography/