How to align Text in React Material UI? - GeeksforGeeks

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:JavascriptJavascript// 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;
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 startOutput:Before clicking on the button:After clicking on the button:
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:
Before clicking on the button:
After clicking on the button:
After clicking on the button:
Example 2: This example describes the right alignment value.
App.js:JavascriptJavascript// 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;
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 startOutput:Before clicking on the button:After clicking on the button:
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:
Before clicking on the button:
After clicking on the button:
After clicking on the button:
Example 3: This example describes the center alignment value.
App.jsJavascriptJavascript// 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;
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 startOutput:Before clicking on the button:After clicking on the button:
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:
Before clicking on the button:
After clicking on the button:
After clicking on the button:
Example 4: This example describes the justify alignment value.
App.js:JavascriptJavascript// 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;
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 startOutput:Before clicking on the button:After clicking on the button:
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:
Before clicking on the button:
After clicking on the button:
After clicking on the button:
Picked
Technical Scripter 2020
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?
How to set the default value for an HTML <select> element ?