typography

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

196,316

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

Demos:

2 contributors

Install typography as a package?

Copied

npm i @bit/mui-org.material-ui.typography

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

typography ()

Demos:

API:

Typography API

Properties

Name	Type	Description
align	`'inherit' \| 'left' \| 'center' \| 'right' \| 'justify'`	Set the text-align on the component.
children	`node`	The content of the component.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
color	`'initial' \| 'inherit' \| 'primary' \| 'secondary' \| 'textPrimary' \| 'textSecondary' \| 'error'`	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. Overrides the behavior of the `variantMapping` prop.
display	`'initial' \| 'block' \| 'inline'`	Controls the display type
gutterBottom	`bool`	If `true`, the text will have a bottom margin.
noWrap	`bool`	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`	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'`	Applies the theme typography styles.
variantMapping	`object`	The component maps 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.