Material UIのcolorsの使い方

@iwasaki 137views 更新:2017年3月7日

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()}
        />

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません