Material-UI

Material-UIのDrawerを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのDrawerを使用して、タスクのフィルタを行うボタンを右側に配置します。 ファイル名とコンポーネント名の変更 タスクのフィルタ用のボタンがフッターではなくなるので、Footer.jsのファイル名を変更します。…

Material-UIのAvatarを使用する(ログイン・タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回に引き続き、ログイン名の横とタスク一覧に表示されるユーザ名の横にAvatarを追加します。 ログイン名の横にAvatarを表示する ログイン時、AppbarにAvatarを表示します。今後の実装のために、ユーザ名とavatarUrlをs…

Material-UIのAvatarを使用する(最近の更新編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIを使用して最近の更新にユーザアイコンを表示します。 "最近の更新”にAvatarを表示する Cloud Functionsの変更 "最近の更新”にユーザアイコン(Avatar)を表示します。 先に、Cloud Functionsを変更して、/rece…

Material-UIのMenuを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com ログアウトのボタンの常時表示をやめ、ユーザ名がクリックされた時にログアウトメニューが出るように変更します。Material-UIのMenuを使用します。 Loginコンポーネントの内部stateにanchor(アンカー:ここではメニューの…

Material-UIのAppBarを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Appbarはいわゆるwebページのヘッダーで、ロゴやメニューなどを表示するのに使用します。 今回はログイン機能とナビゲーション機能をAppbarに載せます。ディレクトリ階層の変更とファイル名の変更も行います。 変更前と…

withStylesによるスタイルの適用(タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com タスク一覧にスタイルを適用する 前回と同様にタスク一覧にもスタイルを適用します。Paperの周りにマージンを設定し、Paperの中に余白を設定します。 src/components/todos/index.js import { compose } from 'redux' //…

withStylesによるスタイルの適用(最近の更新編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIにおいて個別にスタイルを適用するには、stylesオブジェクト(またはstyles関数)とwithStyleを使用します。 前回適用したPaperの周りにマージンと中に余白(padding)を設定します。 ダッシュボードにスタイルを…

Material-UIのPaperを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのPaperを使用し、コンテンツが紙の上に載っているようなUIにします。 最新の更新一覧とタスク一覧をPaperの上に載せます。 最新の更新一覧でPaperを使う 最新の更新をPaperで囲みます。<div>を<Paper>に変更します。 src</paper></div>…

Material-UIのTypographyを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのコンポーネントで囲まれていない文字列をTypographyで囲っていきます。 なお、一部はこの後のページでMaterial-UIのコンポーネントに変換するので、変換しない文字列もあります。 NoMatchページ 始めにNoMa…

Material-UIのCircularProgressを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データの読み込み中、"読み込み中"という文言での表示から、CircularProgressへ変更します。CircularProgressは読み込み中を示すぐるぐるです。 "最近の更新"の読み込み表示の変更 src/components/dashboard/recentUpdat…

Material-UIのListを使用する(タスク一覧編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回に引き続き、<ul>を<List>に、<li>を<ListItem>に変更します。 今回はタスク一覧です。 タスク一覧でMaterial-UIのListを使用する <ul>を<List>に変更します。また、後で必要になるので、isOwnTodosをpropsとしてTodoコンポーネントに渡します。 src/co</list></ul></listitem></li></list></ul>…

Material-UIのListを使用する(最近の更新編)(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIのListを導入します。 <ul>を<List>に、<li>を<ListItem>に変更します。 最近の更新リストでMaterial-UIのListを使用する <ul>を<List>に変更します。 src/components/dashboard/recentUpdatedTodos/index.js import List from '@material-ui/co</list></ul></listitem></li></list></ul>…

Material-UIのTextFieldを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 続いて、<input>を<TextField>に変更します。 inputのref <input>でref属性を使用している場合は、<TextField>に変更する際にいくつか注意点があります。 ref属性をinputRef属性に変更する <input>への参照を保存する変数はクラス変数にする 上記の変更も同時に行う</textfield></textfield>…

Material-UIのButtonを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 既存のコンポーネントをReactのコンポーネントに置き換えていきます。 まずは<button>を<Button>に置き換えます。 なお、一部ボタンはこの後のページでMaterial-UIのコンポーネントに変換するので、変換しないものもあります。 Material-</button></button>…

Material-UIのパッケージのインストールと設定(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Material-UIを使用するのに必要なパッケージのインストールと設定を行います。 パッケージのインストール Installation - Material-UI を参考に進めていきます。 @material-ui/coreのインストール Material-UIの中心とな…

Material-UIでのボタンで英小文字を小文字のまま出力する

Materil-UIの<Button>はデフォルトではアルファベットが全て大文字になります。 例: import Button from '@material-ui/core/Button' // 略 <Button color="secondary" variant="contained"> Webで続きを読む </Button> これを小文字を小文字のまま出力するには、textTransform: 'none'を指定します。 import Button from '@m</button>…

Material-UIのアイコンの色の変え方

Material-UI公式ページにSVGアイコンの色の変え方が載っています。 material-ui.com color属性 テーマカラーの色を使用する場合には、color属性を使用します。 ’inherit' 'primary' 'secondary' 'action' 'error' 'disabled’ のうち1つを指定することで色を…

Material-UIでprimaryとsecondaryの色を変更する

Material-UIのprimaryとsecondaryの色の変え方がわからなかったのでメモ。 デフォルトの色 デフォルトでは、primaryはindigo, secondaryはpinkです。 primaryとsecondaryの色を変更する primaryとsecondaryの色を自分の好きな色に変えていきます。 1. 色を…

ReactでinputRef使用時、参照を保持する変数がundefinedになった原因と対処法

ReactでinputRef使用時、参照を保持する変数がundefinedになり、エラーが発生しました。その原因と対処法を紹介します。 先に結論 参照を保持する変数は、ローカル変数でなく、インスタンス変数にします。インスタンス変数はReact.Componentを拡張したクラス…

Material-UIのTextFieldでrefを使う

TextFieldでrefを使う Material-UI導入時、inputをTextFieldに置き換える時に、多くの属性は<input>を<TextField>に置き換えた際そのままでよいのですが、refはそのままにすると動きません。refをinputRefに変更する必要があります。 変更前 const AddTodo = ({dispatch}) => {</textfield>…

Material-UIのwithStyleとreacrt-reduxのconnectを同時に使う

Material-UIのwithStyleとreacrt-reduxのconnect react-reduxを利用しているアプリにMaterial-UIのstylesを組み込む、もしくはその逆を行うときに、どのようにすれば分からなかったので書いておきます。 connectを使用したコンポーネント↓ import React from…