A React version of an MDC Typography.
npm install @material/react-typography
with Sass:
import '@material/react-typography/index.scss';
with CSS:
import '@material/react-typography/dist/typography.css';
import React from 'react';
import {
Body1,
Body2,
Button,
Caption,
Headline1,
Headline2,
Headline3,
Headline4,
Headline5,
Headline6,
Overline,
Subtitle1,
Subtitle2,
} from '@material/react-typography';
class MyApp extends React.Component {
render() {
return (
<React.Fragment>
<Headline1>Kate Lockwell</Headline1>
<Headline2>Jim Raynor</Headline2>
<Headline3>Kerrigan</Headline3>
<Headline4>Arcturus Mengsk</Headline4>
<Headline5>Valerian Mengsk</Headline5>
<Headline6>Donny Vermillion</Headline6>
<Subtitle1>Kate Lochwell</Subtitle1>
<Subtitle2>Jim Raynor</Subtitle2>
<Body1>Kerrigan</Body1>
<Body2>Arcturus Mengsk</Body2>
<Caption>Valerian Mengsk</Caption>
<Button>Donny Vermillion</Button>
<Overline>Kate Lockwell</Overline>
</React.Fragment>
);
}
}
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h1' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h2' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h3' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h4' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h5' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h6' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h6' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'h6' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'p' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'p' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'span' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'span' ) |
Prop Name |
Type |
Description |
children |
Node |
A React node to render within the component. The text to display |
className |
String |
Classes to be applied to the root element |
tag |
String |
The tag type to render (default 'span' ) |
Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.
Advanced Sass Mixins