How to align Text in React Material UI?

The Typography component of Material UI is used to present your text and content as clearly and efficiently as possible.

Import:

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

Syntax: It sets the alignment property.

<object align="value"> Text </object>

Property Values:

• left: It aligns text along the left side of a page or containing element. It is the default value.
• right: It aligns text along the right side of a page or containing element.
• center: Text is aligned around a midpoint.
• justify: To make sure that both edges of each line are aligned with both margins, space is added between words. The last line in the paragraph is aligned left.

Return Value: It returns the aligned text according to the set value.

Example 1: This example describes the left alignment value.

• App.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 (
      <div className="App">
        <Typography>
          <h1>Typography - A Material-UI component</h1>
          <h2>Best website to learn Computer Science.</h2>
          <h3 id="h3" align={alignment}>
            GeeksforGeeks
          </h3>
        </Typography>
        <button onClick={() => setAlignment("left")}>Press</button>
      </div>
    );
  }
  
  export default App;

• Step to Run Application: Run the application using the following command from the root directory of the project:

  npm start

  Output:

  • Before clicking on the button:
    

  • After clicking on the button:
    

Example 2: This example describes the right alignment value.

• App.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 (
      <div className="App">
        <Typography>
          <h1>Typography - A Material-UI component</h1>
          <h2>Best website to learn Computer Science.</h2>
          <h3 id="h3" align={alignment}>
            GeeksforGeeks
          </h3>
        </Typography>
        <button onClick={() => setAlignment("right")}>Press</button>
      </div>
    );
  }
  
  export default App;

• Step to Run Application: Run the application using the following command from the root directory of the project:

  npm start

  Output:

  • Before clicking on the button:
    

  • After clicking on the button:
    

Example 3: This example describes the center alignment value.

• App.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 (
      <div className="App">
        <Typography>
          <h1>Typography - A Material-UI component</h1>
          <h2>Best website to learn Computer Science.</h2>
          <h3 id="h3" align={alignment}>
            GeeksforGeeks
          </h3>
        </Typography>
        <button onClick={() => setAlignment("center")}>Press</button>
      </div>
    );
  }
  
  export default App;

• Step to Run Application: Run the application using the following command from the root directory of the project:

  npm start

  Output:

  • Before clicking on the button:
    

  • After clicking on the button:
    

Example 4: This example describes the justify alignment value.

• App.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 (
      <div className="App">
        <Typography>
          <h1>Typography - A Material-UI component</h1>
          <h2>Best website to learn Computer Science - GeeksforGeeks </h2>
          <h3 id="h3" align={alignment}>
            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.
          </h3>
        </Typography>
        <button onClick={() => setAlignment("justify")}>Press</button>
      </div>
    );
  }
  
  export default App;

• Step to Run Application: Run the application using the following command from the root directory of the project:

  npm start

  Output:

  • Before clicking on the button:
    

  • After clicking on the button: