React Typography

Styles

Use the MUI CSS helper classes to implement different text styles:

Display4

Display3

Display2

Display1

Headline

Title

Subhead

Body2

Body1

Caption

Button

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div className="mui--text-display4">Display4</div>
        <div className="mui--text-display3">Display3</div>
        <div className="mui--text-display2">Display2</div>
        <div className="mui--text-display1">Display1</div>
        <div className="mui--text-headline">Headline</div>
        <div className="mui--text-title">Title</div>
        <div className="mui--text-subhead">Subhead</div>
        <div className="mui--text-body2">Body2</div>
        <div className="mui--text-body1">Body1</div>
        <div className="mui--text-caption">Caption</div>
        <div className="mui--text-menu">Menu</div>
        <div className="mui--text-button">Button</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »

Colors

You can use the CSS color helpers to change the color:

dark

dark-secondary

dark-hint

light

light-secondary

light-hint

accent

accent-secondary

accent-hint

black

white

danger

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div className="mui--text-dark">dark</div>
        <div className="mui--text-dark-secondary">dark-secondary</div>
        <div className="mui--text-dark-hint">dark-hint</div>
        <br />
        <div style={{backgroundColor: '#444'}}>
          <div className="mui--text-light">light</div>
          <div className="mui--text-light-secondary">light-secondary</div>
          <div className="mui--text-light-hint">light-hint</div>
        </div>
        <br />
        <div className="mui--text-accent">accent</div>
        <div className="mui--text-accent-secondary">accent-secondary</div>
        <div className="mui--text-accent-hint">accent-hint</div>
        <br />
        <div className="mui--text-black">black</div>
        <div className="mui--text-white" style={{backgroundColor: '#444'}}>white</div>
        <div className="mui--text-danger">danger</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »

Material Design Spec

You can combine style and color helpers to implement the Material Design typography spec:

Display4

Display3

Display2

Display1

Headline

Title

Subhead

Body2

Body1

Caption

Button

Display4

Display3

Display2

Display1

Headline

Title

Subhead

Body2

Body1

Caption

Button

Display4

Display3

Display2

Display1

Headline

Title

Subhead

Body2

Body1

Caption

Button

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div className="mui--text-dark-secondary mui--text-display4">Display4</div>
        <div className="mui--text-dark-secondary mui--text-display3">Display3</div>
        <div className="mui--text-dark-secondary mui--text-display2">Display2</div>
        <div className="mui--text-dark-secondary mui--text-display1">Display1</div>
        <div className="mui--text-dark mui--text-headline">Headline</div>
        <div className="mui--text-dark mui--text-title">Title</div>
        <div className="mui--text-dark mui--text-subhead">Subhead</div>
        <div className="mui--text-dark mui--text-body2">Body2</div>
        <div className="mui--text-dark mui--text-body1">Body1</div>
        <div className="mui--text-dark-secondary mui--text-caption">Caption</div>
        <div className="mui--text-dark mui--text-menu">Menu</div>
        <div className="mui--text-dark mui--text-button">Button</div>

        <div style={{backgroundColor: '#444'}}>
          <div className="mui--text-light-secondary mui--text-display4">Display4</div>
          <div className="mui--text-light-secondary mui--text-display3">Display3</div>
          <div className="mui--text-light-secondary mui--text-display2">Display2</div>
          <div className="mui--text-light-secondary mui--text-display1">Display1</div>
          <div className="mui--text-light mui--text-headline">Headline</div>
          <div className="mui--text-light mui--text-title">Title</div>
          <div className="mui--text-light mui--text-subhead">Subhead</div>
          <div className="mui--text-light mui--text-body2">Body2</div>
          <div className="mui--text-light mui--text-body1">Body1</div>
          <div className="mui--text-light-secondary mui--text-caption">Caption</div>
          <div className="mui--text-light mui--text-menu">Menu</div>
          <div className="mui--text-light mui--text-button">Button</div>
        </div>

        <div className="mui--text-accent-secondary mui--text-display4">Display4</div>
        <div className="mui--text-accent-secondary mui--text-display3">Display3</div>
        <div className="mui--text-accent-secondary mui--text-display2">Display2</div>
        <div className="mui--text-accent-secondary mui--text-display1">Display1</div>
        <div className="mui--text-accent mui--text-headline">Headline</div>
        <div className="mui--text-accent mui--text-title">Title</div>
        <div className="mui--text-accent mui--text-subhead">Subhead</div>
        <div className="mui--text-accent mui--text-body2">Body2</div>
        <div className="mui--text-accent mui--text-body1">Body1</div>
        <div className="mui--text-accent-secondary mui--text-caption">Caption</div>
        <div className="mui--text-accent mui--text-menu">Menu</div>
        <div className="mui--text-accent mui--text-button">Button</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »