material-ui > Typography
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#L109h1: ObjectfontFamily: ""Roboto", "Helvetica", "Arial", sans-serif"fontWeight: 300fontSize: "6rem"lineHeight: 1.167letterSpacing: "-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.
🛈 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.