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
h6. Then, you have
subtitle2 which are variations of
body2 which are variations of
<p> paragraph with font size
14px respectively. There are
caption caption variants which are both smaller font sized
<Typography> with no props will render a
body1 variant, which is just a
<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 variant="h1">Typography h1</Typography>
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.
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"
If you want to use the
color prop, you are given the typical color prop selections:
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.
To line break with Typography, set the display prop to block, which will break the line before the text inside.
<Typography display="block"> My text will be on the next line </Typography. This may apply if you
are using the
caption variants, which are
<span> and so are normally display inline-block.