如何在 React Material UI 中对齐文本？

Material UI 的 Typography 组件用于尽可能清晰有效地呈现您的文本和内容。

进口：

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

语法：它设置对齐属性。

属性值：

• left：它沿着页面或包含元素的左侧对齐文本。它是默认值。
• 右：它沿着页面或包含元素的右侧对齐文本。
• center：文本围绕中点对齐。
• justify：为了确保每行的两边都与两边的边距对齐，在单词之间添加了空格。段落中的最后一行左对齐。

返回值：根据设置值返回对齐的文本。

示例 1：此示例描述左对齐值。

• 应用程序.js：

  Javascript

  // This code will be written in App.js file of your React Project
    
  import Typography from "@material-ui/core/Typography";
  import { useState } from "react";
    
  function App() {
    const [alignment, setAlignment] = useState("");
    
    return (
      
  
        
          
  Typography - A Material-UI component
          
  Best website to learn Computer Science.
          
  
            GeeksforGeeks
          
        
         setAlignment("left")}>Press
      
    );
  }
    
  export default App;

  
  
  
  
  

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

  npm start

  输出：

  • 在点击按钮之前：
    

  • 点击按钮后：
    

示例 2：此示例描述了右对齐值。

• 应用程序.js：

  Javascript

  // This code will be written in App.js file of your React Project
    
  import Typography from "@material-ui/core/Typography";
  import { useState } from "react";
    
  function App() {
    const [alignment, setAlignment] = useState("");
    
    return (
      
  
        
          
  Typography - A Material-UI component
          
  Best website to learn Computer Science.
          
  
            GeeksforGeeks
          
        
         setAlignment("right")}>Press
      
    );
  }
    
  export default App;
  

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

  npm start

  输出：

  • 在点击按钮之前：
    

  • 点击按钮后：
    

示例 3：此示例描述了中心对齐值。

• 应用程序.js

  Javascript

  // This code will be written in App.js file of your React Project
    
  import Typography from "@material-ui/core/Typography";
  import { useState } from "react";
    
  function App() {
    const [alignment, setAlignment] = useState("");
    
    return (
      
  
        
          
  Typography - A Material-UI component
          
  Best website to learn Computer Science.
          
  
            GeeksforGeeks
          
        
         setAlignment("center")}>Press
      
    );
  }
    
  export default App;
  

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

  npm start

  输出：

  • 在点击按钮之前：
    

  • 点击按钮后：
    

示例 4：此示例描述 justify 对齐值。

• 应用程序.js：

  Javascript

  // This code will be written in App.js file of your React Project
    
  import Typography from "@material-ui/core/Typography";
  import { useState } from "react";
    
  function App() {
    const [alignment, setAlignment] = useState("right");
    
    return (
      
  
        
          
  Typography - A Material-UI component
          
  Best website to learn Computer Science - GeeksforGeeks 
          
  
            How many times were you frustrated while looking out for a good
            collection of programming/algorithm/interview questions? What did you
            expect and what did you get? This portal has been created to provide
            well written, well thought and well explained solutions for selected
            questions.
          
        
         setAlignment("justify")}>Press
      
    );
  }
    
  export default App;
  

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

  npm start

  输出：

  • 在点击按钮之前：
    

  • 点击按钮后：