materialuiupgraded

Version:

Material-UI's workspace package

92 lines (73 loc) • 8.04 kB

Markdown

--- filename: /packages/material-ui/src/Typography/Typography.js title: Typography API ---  # Typography The API documentation of the Typography React component. Learn more about the properties and the CSS customization points. ```js import Typography from '@material-ui/core/Typography'; ``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | align | enum: '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](#css-api) below for more details. | | color | enum: 'default', 'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |  func |  object | | 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. | | gutterBottom | bool | false | If `true`, the text will have a bottom margin. | | headlineMapping | object | { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p', // deprecated display4: 'h1', display3: 'h1', display2: 'h1', display1: 'h1', headline: 'h1', title: 'h2', subheading: 'h3',} | We are empirically mapping the variant property 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` property. The default mapping is the following: | | internalDeprecatedVariant | bool | | A deprecated variant is used from an internal component. Users don't need a deprecation warning here if they switched to the v2 theme. They already get the mapping that will be applied in the next major release. | | 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 | enum: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit', "display4", 'display3', 'display2', 'display1', 'headline', 'title', 'subheading' | | Applies the theme typography styles. Use `body1` as the default value with the legacy implementation and `body2` with the new one. | Any other properties supplied will be spread to the root element (native element). ## CSS API You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. | display4 | Styles applied to the root element if `variant="display4"`. | display3 | Styles applied to the root element if `variant="display3"`. | display2 | Styles applied to the root element if `variant="display2"`. | display1 | Styles applied to the root element if `variant="display1"`. | headline | Styles applied to the root element if `variant="headline"`. | title | Styles applied to the root element if `variant="title"`. | subheading | Styles applied to the root element if `variant="subheading"`. | body2 | Styles applied to the root element if `variant="body2"`. | body1 | Styles applied to the root element if `variant="body1"`. | caption | Styles applied to the root element if `variant="caption"`. | button | Styles applied to the root element if `variant="button"`. | h1 | Styles applied to the root element if `variant="h1"`. | h2 | Styles applied to the root element if `variant="h2"`. | h3 | Styles applied to the root element if `variant="h3"`. | h4 | Styles applied to the root element if `variant="h4"`. | h5 | Styles applied to the root element if `variant="h5"`. | h6 | Styles applied to the root element if `variant="h6"`. | subtitle1 | Styles applied to the root element if `variant="subtitle1"`. | subtitle2 | Styles applied to the root element if `variant="subtitle2"`. | overline | Styles applied to the root element if `variant="overline"`. | srOnly | Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. | alignLeft | Styles applied to the root element if `align="left"`. | alignCenter | Styles applied to the root element if `align="center"`. | alignRight | Styles applied to the root element if `align="right"`. | alignJustify | Styles applied to the root element if `align="justify"`. | noWrap | Styles applied to the root element if `align="nowrap"`. | gutterBottom | Styles applied to the root element if `gutterBottom={true}`. | paragraph | Styles applied to the root element if `paragraph={true}`. | colorInherit | Styles applied to the root element if `color="inherit"`. | colorPrimary | Styles applied to the root element if `color="primary"`. | colorSecondary | Styles applied to the root element if `color="secondary"`. | colorTextPrimary | Styles applied to the root element if `color="textPrimary"`. | colorTextSecondary | Styles applied to the root element if `color="textSecondary"`. | colorError | Styles applied to the root element if `color="error"`. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Typography/Typography.js) for more detail. If using the `overrides` key of the theme as documented [here](/customization/themes/#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiTypography`. ## Demos - [Typography](/style/typography/)