closure-react-typography v0.7.9

React Typography

A React version of an MDC Typography.

Installation

npm install @material/react-typography

Usage

Styles

with Sass:

import '@material/react-typography/index.scss';

with CSS:

import '@material/react-typography/dist/typography.css';

Javascript Instantiation

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>
    );
  }
}

Components

Headline1

Props

Headline2

Props

Headline3

Props

Headline4

Props

Headline5

Props

Headline6

Props

Subtitle1

Props

Subtitle2

Props

Body1

Props

Body2

Props

Button

Props

Caption

Props

Overline

Props

Sass Mixins

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