材质 UI 排版

Material-UI 是一个用户界面库，提供预定义和可定制的 React 组件，用于更快、更轻松的 Web 开发，这些 Material-UI 组件基于 Google 的 Material Design。在本文中，我们将讨论 Material-UI 库中的Typography组件。

排版：

Typography 是一个 Material-UI 组件，用于标准化文本及其相关的 CSS 属性，而无需担心浏览器兼容性问题。

例子：

 h1 - Heading Variant 

安装反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app typography-example

步骤2：现在通过以下命令进入项目目录：

cd typography-example

安装 Material-UI：

通过 npm/yarn 安装 Material-UI 的源文件，它们负责注入所需的 CSS。

npm install @material-ui/core 
// OR
yarn add @material-ui/core

导入排版：

您可以使用以下代码从@material-ui/core导入 组件。

import { Typography } from '@material-ui/core' 
// OR
import Typography from '@material-ui/core/Typography'

重要道具及其价值：

• align：用于对齐组件上的文字。示例：继承、左、居中、右或对齐。
• color：用于设置组件的文字颜色。示例：initial、inherit、primary、secondary、textPrimary、textSecondary 或 error。
• variant：用于设置主题排版样式。示例：h1、h2、h3、h4、h5、h6、subtitle1、subtitle2、body1、body2、标题、按钮、上划线、srOnly 或继承。
• classes：它是覆盖样式的自定义 CSS 对象。
• 段落：如果这是真的，文本将有一个底部边距。示例：真或假。

示例：在App.js文件中使用 实现 H1、H2、H3 样式。

Javascript

import { Typography } from '@material-ui/core';
  
function App() {
  return (
    

      {/* Setting the text styling to H1*/}
      
        H1.Heading
      
      {/* Setting the text to center with align prop */}
      
        H2.Heading
      
      {/* Setting the text color to primary*/}
      
        H3.Heading
      
      {/* Setting the text type styling to be like a button */}
      
        Button
      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：