How to use Typography in Material-UI React

Material-UI Typography component:

For showing text, Material-UI provides one component called Typography. It provides different props to customize the text.

In this post, we will learn how to use Typography with examples.

YouTube video:

I have published one video on YouTube that you can check here:

props:

Let's check the props provided by Typography one by one:

align:

It is used to set the text-align of the component. It can be:

• inherit (default)
• left
• center
• right
• justify

<Typography align="left">align = left</Typography>

color:

It is used to change the color of the text. It supports:

• initial (default)
• inherit
• primary
• secondary
• textPrimary
• textSecondary
• error

<Typography color="error">color = error</Typography>

component:

It is used to change the component for the Typography. By default, it uses p.

<Typography component="h1">component = h1</Typography>

display:

Use it to control the display type. It can be:

• initial (default)
• block
• inline

gutterBottom:

If we set true, text will add one bottom margin.

<Typography gutterBottom={true}>gutterBottom = true</Typography>

noWrap:

It is false by default, if we change it to true, the text will not wrap, but truncate it with ellipsis.

<Typography noWrap>this is a long text with noWrap is set as true</Typography>

paragraph:

It is false by default, It adds a bottom margin if we change it to true.

variant:

It is used to change the theme typography style. By default, it is body1. It can be one of h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button, overline, srOnly, or inherit.

<Typography variant="h3">variant = h3</Typography>

variantMapping:

variantMapping is used to map the variant prop to any other HTML element type. For example:

<Typography variant="bodyNormal" variantMapping={{ bodyNormal: "h3" }}>
  variant = h3 using variantMapping
</Typography>

Complete example:

import Typography from "@material-ui/core/Typography";

function App() {
  return (
    <div>
      <Typography>align = inherit</Typography>
      <Typography align="left">align = left</Typography>
      <Typography align="center">align = center</Typography>
      <Typography align="right">align = right</Typography>
      <Typography align="justify">align = justify</Typography>
      <Typography color="initial">color = initial</Typography>
      <Typography color="inherit">color = inherit</Typography>
      <Typography color="primary">color = primary</Typography>
      <Typography color="secondary">color = secondary</Typography>
      <Typography color="textPrimary">color = textPrimary</Typography>
      <Typography color="textSecondary">color = textSecondary</Typography>
      <Typography color="error">color = error</Typography>
      <Typography component="h1">component = h1</Typography>
      <Typography gutterBottom>gutterBottom = true</Typography>
      <Typography noWrap>
        this is a long text with noWrap is set as true
      </Typography>
      <Typography paragraph>paragraph true for this</Typography>
      <Typography variant="h6">variant = h6</Typography>
      <Typography variant="h3">variant = h3</Typography>
      <Typography variant="bodyNormal" variantMapping={{ bodyNormal: "h3" }}>
        variant = h3 using variantMapping
      </Typography>
    </div>
  );
}

export default App;