Material-UI typography for version 0.x (based on SASS and CSS modules)

index.js

<Text align="left" type="display4">News</Text>
<Text colorInherit type="display3">News</Text>
<Text component="h1" type="display2">News</Text>
<Text gutterBottom type="display1">News</Text>
<Text type="headline">News</Text>
<Text secondary type="title">News</Text>
<Text type="subheading">News</Text>
<Text type="body2">News</Text>
<Text type="body1">News</Text>
<Text type="caption">News</Text>
<Text type="button">News</Text>

Text.js

import React, {PropTypes} from 'react';
import cx from 'classnames';
import cs from './Text.scss';

/**
 * Material-UI doesn't expose the Material Design typography in the
 * current stable version, but the upcoming major version does so
 * (https://github.com/callemall/material-ui/blob/next/src/Text/Text.js).
 * As the upcoming relase is currently in alpha version, this
 * component is back-ported so its API can already be used.
 * This should make an upgrade to the upcoming release easier.
 */

const propTypes = {
  align: PropTypes.oneOf([
    'left',
    'center',
    'right',
    'justify'
  ]),
  children: PropTypes.node,
  className: PropTypes.string,
  colorInherit: PropTypes.bool,
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func
  ]),
  gutterBottom: PropTypes.bool,
  noWrap: PropTypes.bool,
  paragraph: PropTypes.bool,
  secondary: PropTypes.bool,
  type: PropTypes.oneOf([
    'display4',
    'display3',
    'display2',
    'display1',
    'headline',
    'title',
    'subheading',
    'body2',
    'body1',
    'caption',
    'button'
  ])
};

const defaultProps = {
  colorInherit: false,
  component: 'span',
  gutterBottom: false,
  noWrap: false,
  paragraph: false,
  secondary: false,
  type: 'body1'
};

const contextTypes = {
  muiTheme: PropTypes.object.isRequired
};

const Text = ({
  align,
  children,
  className,
  colorInherit,
  component,
  gutterBottom,
  noWrap,
  paragraph,
  secondary,
  type
}, {muiTheme}) => {
  const renderClassName = cx(cs.root, cs[type], {
    [cs.root_colorInherit]: colorInherit,
    [cs.root_noWrap]: noWrap,
    [cs.root_secondary]: secondary,
    [cs.root_paragraph]: paragraph,
    [cs.root_gutterBottom]: gutterBottom,
    [cs.root_paragraph]: paragraph,
    [cs[`root_${align}`]]: align
  }, className);

  const style = {};

  if (['display4', 'display3', 'display2', 'display1', 'caption'].includes(type)) {
    style.color = muiTheme.palette.secondaryTextColor;
  } else if (['headline', 'title', 'subheading', 'body2', 'body1'].includes(type)) {
    style.color = muiTheme.palette.primary;
  }

  if (secondary) style.color = muiTheme.palette.secondaryTextColor;

  const Component = paragraph ? 'p' : component;

  return (
    <Component
      style={style}
      className={renderClassName}
      children={children}
    />
  );
};

Text.propTypes = propTypes;
Text.defaultProps = defaultProps;
Text.contextTypes = contextTypes;
export default Text;

Text.scss

$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;

.root {
  display: block;
  margin: 0;

  &_left {
    text-align: left;
  }

  &_center {
    text-align: center;
  }

  &_right {
    text-align: right;
  }

  &_justify {
    text-align: justify;
  }

  &_noWrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &_gutterBottom {
    margin-bottom: 0.35em;
  }

  &_paragraph {
    margin-bottom: 16px;
  }

  &_colorInherit {
    color: inherit;
  }
}

.display4 {
  font-size: 112px;
  font-weight: $font-weight-light;
  letter-spacing: -.04em;
  line-height: 1;
}

.display3 {
  font-size: 56px;
  font-weight: $font-weight-regular;
  letter-spacing: -.02em;
  line-height: 1.35;
}

.display2 {
  font-size: 45px;
  font-weight: $font-weight-regular;
  line-height: 48px;
}

.display1 {
  font-size: 34px;
  font-weight: $font-weight-regular;
  line-height: 40px;
}

.headline {
  font-size: 24px;
  font-weight: $font-weight-regular;
  line-height: 32px;
}

.title {
  font-size: 21px;
  font-weight: $font-weight-medium;
  line-height: 1;
}

.subheading {
  font-size: 16px;
  font-weight: $font-weight-regular;
  line-height: 24px;
}

.body2 {
  font-size: 14px;
  font-weight: $font-weight-medium;
  line-height: 24px;
}

.body1 {
  font-size: 14px;
  font-weight: $font-weight-regular;
  line-height: 20px;
}

.caption {
  font-size: 12px;
  font-weight: $font-weight-regular;
  line-height: 1;
}