リモートワークを便利にするWebアプリRee⑦~Material UIを導入する~

前回、フロントエンド構成を整えたところで、次はMaterial UIを導入して見た目も作り込んでいけるようにします。

Material UIはまだ正式版ではないですがv1を使ってみます。

Material UI

インストール

以下のコマンドで行います。

これで準備完了です。

 

使い方

例えばボタンを使う場合は以下のようにします。

raisedをつけると、ふわっと浮いたようなボタンで、外すとフラットなボタンになります。

現在のバージョンではフラットなボタンはFlatButton、浮いたボタンはRaisedButtonと別々のコンポーネントが用意されてますが、属性をつけるかどうかで、切り替えられるの便利です。全体的に前のバージョンよりも使いやすくなっている印象です。