React+MaterialUIでWebデザインを初めからStep3

やること

今回は短め。前回作成したヘッダーの色を変更します。
わかりやすいように赤色に変更してみます。

React+MaterialUIでWebデザインを初めからStep2

2018.04.09

やりかた

以下の順序で記述していきます。

  1. 色モジュールのインポート・カラー設定
  2. 固定変数に代入
  3. 対象タグのクラスに適用

色モジュールのインポート・カラー設定

カラーの数値設定は公式サイトで紹介されているので確認してください。
https://material-ui-next.com/style/color/

以下のコードを追加します。

固定変数に代入

以下の形式で追記します。

Q:「colorPrimary」、「backgroundColor」はどこからでてきたのか?
A:実際のソースコードに記載があります。
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/AppBar/AppBar.js

一部抜粋

対象タグのクラスに適用

変更前

変更後

スクリーンショット

いい感じの赤になりました。

ソースコード

さいごに

これでコンポーネントのカラー変更ができるようになりました。
細かいデザイン、文字配置も同じように変更できます。
上記であれば「marginRight」などの数値を変更するとタイトルの位置が変更できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です