Typography API
The API documentation of the Typography React component. Learn more about the props and the CSS customization points.
import { Typography } from '@material-ui/core';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 an ellipsis. |
| 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 align="nowrap". |
| 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.
Notes
The component is fully StrictMode compatible.