Skip to content
Edit this page

Typography API

API reference docs for the React Typography component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import Typography from '@mui/material/Typography';
// or
import { Typography } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

align

Set the text-align on the component.

Type:

'center' | 'inherit' | 'justify' | 'left' | 'right'

Default:

'inherit'
children

The content of the component.

Type:

node
classes

Override or extend the styles applied to the component.

Type:

object
component

The component used for the root node. Either a string to use a HTML element or a component.

Type:

elementType
gutterBottom

If true, the text will have a bottom margin.

Type:

bool

Default:

false
noWrap

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).

Type:

bool

Default:

false
paragraph

If true, the element will be a paragraph element.

Type:

bool

Default:

false
sx

The system prop that allows defining system overrides as well as additional CSS styles.

Type:

Array<func | object | bool> | func | object
variant

Applies the theme typography styles.

Type:

'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2' | string

Default:

'body1'
variantMapping

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.

Type:

object

Default:

{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p', inherit: 'p', }
As a CSS utility, the Typography component also supports all system properties. You can use them as props directly on the component.

The ref is forwarded to the root element.

Theme default props

You can use MuiTypography to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiTypography-rootroot

Styles applied to the root element.

.MuiTypography-body2body2

Styles applied to the root element if variant="body2".

.MuiTypography-body1body1

Styles applied to the root element if variant="body1".

.MuiTypography-captioncaption

Styles applied to the root element if variant="caption".

.MuiTypography-buttonbutton

Styles applied to the root element if variant="button".

.MuiTypography-h1h1

Styles applied to the root element if variant="h1".

.MuiTypography-h2h2

Styles applied to the root element if variant="h2".

.MuiTypography-h3h3

Styles applied to the root element if variant="h3".

.MuiTypography-h4h4

Styles applied to the root element if variant="h4".

.MuiTypography-h5h5

Styles applied to the root element if variant="h5".

.MuiTypography-h6h6

Styles applied to the root element if variant="h6".

.MuiTypography-subtitle1subtitle1

Styles applied to the root element if variant="subtitle1".

.MuiTypography-subtitle2subtitle2

Styles applied to the root element if variant="subtitle2".

.MuiTypography-overlineoverline

Styles applied to the root element if variant="overline".

.MuiTypography-inheritinherit

Styles applied to the root element if variant="inherit".

.MuiTypography-alignLeftalignLeft

Styles applied to the root element if align="left".

.MuiTypography-alignCenteralignCenter

Styles applied to the root element if align="center".

.MuiTypography-alignRightalignRight

Styles applied to the root element if align="right".

.MuiTypography-alignJustifyalignJustify

Styles applied to the root element if align="justify".

.MuiTypography-noWrapnoWrap

Styles applied to the root element if nowrap={true}.

.MuiTypography-gutterBottomgutterBottom

Styles applied to the root element if gutterBottom={true}.

.MuiTypography-paragraphparagraph

Styles applied to the root element if paragraph={true}.

You can override the style of the component using one of these customization options: