React Typography

Styles

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

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:

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:

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 »