Typography API
The API documentation of the Typography React component. Learn more about the props and the CSS customization points.
Import
import Typography from '@material-ui/core/Typography';
// or
import { Typography } from '@material-ui/core';You can learn more about the difference by reading this guide.
Props
| Name | 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 DOM element or a component. By default, it maps the variant to a good default headline component. | |
| 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',} | We are empirically mapping the variant prop to a range of different DOM 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. |
The ref is forwarded to the root element.
Any other props supplied will be provided to the root element (native element).
CSS
- Style sheet name:
MuiTypography. - Style sheet details:
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiTypography-root | Styles applied to the root element. |
| body2 | .MuiTypography-body2 | Styles applied to the root element if variant="body2". |
| body1 | .MuiTypography-body1 | Styles applied to the root element if variant="body1". |
| caption | .MuiTypography-caption | Styles applied to the root element if variant="caption". |
| button | .MuiTypography-button | Styles applied to the root element if variant="button". |
| h1 | .MuiTypography-h1 | Styles applied to the root element if variant="h1". |
| h2 | .MuiTypography-h2 | Styles applied to the root element if variant="h2". |
| h3 | .MuiTypography-h3 | Styles applied to the root element if variant="h3". |
| h4 | .MuiTypography-h4 | Styles applied to the root element if variant="h4". |
| h5 | .MuiTypography-h5 | Styles applied to the root element if variant="h5". |
| h6 | .MuiTypography-h6 | Styles applied to the root element if variant="h6". |
| subtitle1 | .MuiTypography-subtitle1 | Styles applied to the root element if variant="subtitle1". |
| subtitle2 | .MuiTypography-subtitle2 | Styles applied to the root element if variant="subtitle2". |
| overline | .MuiTypography-overline | Styles applied to the root element if variant="overline". |
| srOnly | .MuiTypography-srOnly | Styles applied to the root element if variant="srOnly". Only accessible to screen readers. |
| alignLeft | .MuiTypography-alignLeft | Styles applied to the root element if align="left". |
| alignCenter | .MuiTypography-alignCenter | Styles applied to the root element if align="center". |
| alignRight | .MuiTypography-alignRight | Styles applied to the root element if align="right". |
| alignJustify | .MuiTypography-alignJustify | Styles applied to the root element if align="justify". |
| noWrap | .MuiTypography-noWrap | Styles applied to the root element if nowrap={true}. |
| gutterBottom | .MuiTypography-gutterBottom | Styles applied to the root element if gutterBottom={true}. |
| paragraph | .MuiTypography-paragraph | Styles applied to the root element if paragraph={true}. |
| colorInherit | .MuiTypography-colorInherit | Styles applied to the root element if color="inherit". |
| colorPrimary | .MuiTypography-colorPrimary | Styles applied to the root element if color="primary". |
| colorSecondary | .MuiTypography-colorSecondary | Styles applied to the root element if color="secondary". |
| colorTextPrimary | .MuiTypography-colorTextPrimary | Styles applied to the root element if color="textPrimary". |
| colorTextSecondary | .MuiTypography-colorTextSecondary | Styles applied to the root element if color="textSecondary". |
| colorError | .MuiTypography-colorError | Styles applied to the root element if color="error". |
| displayInline | .MuiTypography-displayInline | Styles applied to the root element if display="inline". |
| displayBlock | .MuiTypography-displayBlock | Styles applied to the root element if display="block". |
You can override the style of the component thanks to one of these customization points:
- With a rule name of the
classesobject prop. - With a global class name.
- With a theme and an
overridesproperty.
If that's not sufficient, you can check the implementation of the component for more detail.