Skip to content
Related Articles
Open in App
Not now

Related Articles

Material UI Typography

Improve Article
Save Article
  • Last Updated : 26 Sep, 2022
Improve Article
Save Article

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 is a Material-UI component used to standardize the text and its related CSS properties without worrying about browser compatibility issues.


<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 @mui/material @emotion/react @emotion/styled
// OR
yarn add @mui/material @emotion/react @emotion/styled

Importing Typography:

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

import Typography from '@mui/material/Typography';
// or
import { Typography } from '@mui/material';

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.


import { Typography } from '@mui/material';
function App() {
  return (
    <div className="App">
      {/* Setting the text styling to H1*/}
      <Typography variant="h1">
      {/* Setting the text to center with align prop */}
      <Typography align="center" variant="h2">
      {/* Setting the text color to primary*/}
      <Typography color="primary" variant="h3">
      {/* Setting the text type styling to be like a button */}
      <Typography variant="button">
export default App;

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

npm start


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!