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.
Component name
The MuiTypography name can be used for providing default props or style overrides at the theme level.
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 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' | '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. |
The ref is forwarded to the root element.
Any other props supplied will be provided to the root element (native element).
CSS
| 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". |
| 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.