material-uiをreactで使いながらのメモ2

react-router

React.js用のルーティングライブラリとしてreact-routerがあります。
しかし、個人的にかなり癖があるように思います。
先日、めちゃめちゃ苦労してルーティングを成功させたので、その例を記します。
おそらく、２階層のネストまでは割とすんなりいけるのですが、3段階目のネストに苦労しました。

• aタグを使うと通常遷移
• Linkコンポーネント（react-routerに含まれる）を使うと遷移せずに遷移。 （routingのnameで指定する。）

テーマ

テーマを入れ子で読み込めるのかは不明だが、トップの定義でパレットを作っておいて、
コンポーネントのインライン指定するのが標準っぽい？
（英語をちゃんと読めやと。。）

export default {
  spacing: spacing,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: cyan500,
    primary2Color: cyan700,
    primary3Color: grey400,
    accent1Color: pinkA200,
    accent2Color: grey100,
    accent3Color: grey500,
    textColor: darkBlack,
    alternateTextColor: white,
    canvasColor: white,
    borderColor: grey300,
    disabledColor: fade(darkBlack, 0.3),
    pickerHeaderColor: cyan500,
    clockCircleColor: fade(darkBlack, 0.07),
    shadowColor: fullBlack,
  },
};

  render () {
    return (
      <span style={{color: this.context.muiTheme.palette.textColor}}>
        Hello World!
      </span>
    );
  }

クラス指定みたいなことはできるんかいな。。cssでやったほうが効率よさそうな気もする。。

react-routerでページ遷移にちょっとしたアニメーションを付ける | WebDesign Dackel
http://goo.gl/MdgVKr

ちょっとしたアニメーションをつける事例。
速度指定を、、cssアニメーションの指定と記述をあわせる必要があったりするらしい？

コードを見ると、用意されたコンポーネントについては上書きできるみたい。

でも、これだけだと細かいカスタマイズには微妙かも。

動的に色を切り替えてみる

パスが該当していたらシアンにする。お、三項演算子つかえた。

var style = {
    backgroundColor: (location.pathname == row.path) ? cyan100 : white
}
return (
    <MenuItem
        style={style}
    />
);