Material UIのcolorsの使い方

http://www.material-ui.com/#/customization/colors

の使い方です。

すべてのカラーを取得してcolorsとして使えるようにします。

import * as colors from 'material-ui/styles/colors';

状態によって動的に色を変える場合、関数化しておきます。

  getColor() {
    if (this.props.value === this.props.max) {
      return colors.green500;
    } else if (this.props.value > this.props.max) {
      return colors.red500;
    }
    return colors.cyan500;
  }

プログレスバーなどの色の指定は以下のようにします。

        <LinearProgress
          mode="determinate"
          value={this.props.value}
          max={this.props.max}
          color={this.getColor()}
        />