Typography

Provides a consistent way to present text.

<Typography>There are some great styles on this text</Typography>

Props

Prop	Type	Default	Description
align	'inherit' \| 'left' \| 'center' \| 'right' \| 'justify'	'inherit'	Set the text-align on the component.
children	node		The content of the component.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'initial' \| 'inherit' \| 'primary' \| 'secondary' \| 'textPrimary' \| 'textSecondary' \| 'error'	'initial'	The color of the component. It supports those theme colors that make sense for this component.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component. Overrides the behavior of the variantMapping prop.
display	'initial' \| 'block' \| 'inline'	'initial'	Controls the display type
gutterBottom	bool	false	If true, the text will have a bottom margin.
noWrap	bool	false	If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).
paragraph	bool	false	If true, the text will have a bottom margin.
variant	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'subtitle1' \| 'subtitle2' \| 'body1' \| 'body2' \| 'caption' \| 'button' \| 'overline' \| 'srOnly' \| 'inherit'	'body1'	Applies the theme typography styles.
variantMapping	object	{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p',}	The component maps the variant prop to a range of different HTML element types. For instance, subtitle1 to <h6>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the component prop.

Examples

Basic

<div>
  <Typography variant="h1" component="h2" gutterBottom>
    h1. Heading
  </Typography>
  <Typography variant="h2" gutterBottom>
    h2. Heading
  </Typography>
  <Typography variant="h3" gutterBottom>
    h3. Heading
  </Typography>
  <Typography variant="h4" gutterBottom>
    h4. Heading
  </Typography>
  <Typography variant="paragraph" gutterBottom>
    paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
    blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
    neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
    quasi quidem quibusdam.
  </Typography>
  <br />
  <br />
  <Typography variant="body1" gutterBottom>
    body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
    blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
    neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
    quasi quidem quibusdam.
  </Typography>
  <br />
  <Typography variant="body2" gutterBottom>
    body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
    blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
    neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
    quasi quidem quibusdam.
  </Typography>
</div>