Skip to content
Related Articles

Related Articles

How to align Text in React Material UI?
  • Last Updated : 23 Dec, 2020

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // 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;

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // 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;

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // 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;

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // 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;

    chevron_right

    
    

  • 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :