heading.js

import React, {Component, PropTypes} from 'react';
import cx from 'classnames';

import styles from './wherever';

export default class Heading extends Component {
  static propTypes = {
    level: PropTypes.oneOf(1, 2, 3, 4, 5, 6).isRequired,
    theme: PropTypes.oneOf('macropod', 'bugherd'),
  };
  
  render() {
    this.tag = 'h' + this.props.level;
    
    const headingClass = {
      [styles[this.tag]]: true,
      [styles[theme]]: this.props.theme,
    };
    
    return (
      <this.tag className={headingClass} {...this.props}>{ this.props.children }</this.tag>
    )
  } 
}

heading.mcss

.bugherd {
  color: yellow;
}

.h1 {
  font-size: 100px;
}

.h2 {
  font-size: 80px;
}

.h3 {
  font-size: 60px;
}

.h4 {
  font-size: 40px;
}

.h5 {
  font-size: 20px;
}

.h5 {
  font-size: 10px;
}

somewhere.js

import React, {Component, PropTypes} from 'react';
import {Heading} from './blobs';

export default class Telephone extends Component {
  render() {
    return (
      <div>
        <Heading level={1}>First Heading</Heading>
        <Heading level={2} theme="bugherd">Yellow Second Heading</Heading>
      </div>
    )
  }
}