The Typography component in Material UI provides a helpful variety of styled text components.

The actual React/HTML component to be used is determined by the variant prop. So a variant of h1 renders a <h1>, and so on for h2, h3, h4, h5 and h6. Then, you have subtitle1 and subtitle2 which are variations of h6, and body1 and body2 which are variations of <p> paragraph with font size 16px and 14px respectively. There are also overline and caption caption variants which are both smaller font sized <span> components.

Typography Usage

The default <Typography> with no props will render a body1 variant, which is just a <p>. So: <Typography> my text </Typography> is just like rendering <p> my text </p> except Material-UI will apply additional CSS. To render an <h1>, simply pass "h1" as the variant to the <Typography component:

  <Typography variant="h1">Typography h1</Typography>

Typography Sandbox

To view more examples, see the sandbox below.

What CSS is applied for Typography components?

In addition to changing the element's tag, Material UI will apply CSS for each typography variant. For example, theme.typography.h1 is applied when the variant prop is "h1".

If we look at Material UI's default theme, that applies this CSS:

// https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Typography/Typography.js#L109
h1: Object
  fontFamily: ""Roboto", "Helvetica", "Arial", sans-serif"
  fontWeight: 300
  fontSize: "6rem"
  lineHeight: 1.167
  letterSpacing: "-0.01562em"

Typography color

If you want to use the color prop, you are given the typical color prop selections: initial, inherit, primary, secondary, textPrimary, textSecondary, error which correspond to your theme's colors.

Custom Typography Color, Bold, CSS

To set a custom color, font-weight or other CSS for Typography, you will need a custom CSS class. See the above examples in the sandbox.

Typography Line-break

To line break with Typography, set the display prop to block, which will break the line before the text inside. Example: <Typography display="block"> My text will be on the next line </Typography. This may apply if you are using the overline or caption variants, which are <span> and so are normally display inline-block.