Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Material UI Typography

  • Last Updated : 05 Jan, 2021

Material-UI is a user interface library that provides pre-defined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Typography component in the Material-UI library.

Typography:

Typography is a Material-UI component used to standardize the text and its related CSS properties without worrying about browser compatibility issues.

Example:

<Typography variant="h1"> h1 - Heading Variant </Typography>

Installing React App:



Step 1: Create a React app using the following command.

npx create-react-app typography-example

Step 2: Now get into the project directory by the following command:

cd typography-example

Installing Material-UI: 

Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.

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

Importing Typography:

You can import <Typography /> component from @material-ui/core using the following code.

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

Important Props and its values:

  • align: It is used to align the text on the component. Example: inherit, left, center, right, or justify.
  • color: It is used to set the text color of the component. Example: initial, inherit, primary, secondary, textPrimary, textSecondary, or error.
  • variant: It is used to set the theme typography styles. Example: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button, overline, srOnly or inherit.
  • classes: It is the custom CSS object to override the styles.
  • paragraph: If this is true the text will have a bottom margin. Example: true or false.

Example: Implementing H1, H2, H3 styling using <Typography /> in App.js file.

Javascript




import { Typography } from '@material-ui/core';
  
function App() {
  return (
    <div className="App">
      {/* Setting the text styling to H1*/}
      <Typography variant="h1">
        H1.Heading
      </Typography>
      {/* Setting the text to center with align prop */}
      <Typography align="center" variant="h2">
        H2.Heading
      </Typography>
      {/* Setting the text color to primary*/}
      <Typography color="primary" variant="h3">
        H3.Heading
      </Typography>
      {/* Setting the text type styling to be like a button */}
      <Typography variant="button">
        Button
      </Typography>
    </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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!