Material-UI
MUI(Material-UI)のアイコンにフチドリをつけます。 通常のCSSのスタイルと同様にstrokeとstrokeWidthを指定します。strokeOpacityやstrokeLinejoinなども指定できます。 コード <StarIcon sx={{color: yellow[500], stroke: yellow[900], strokeWidth: 4, strokeOpacity: 0.2}} /> 全ソースコード import React from 'react'; import Box from '@mui/material</staricon>…
前回は組み込みコンポーネントをMaterial-UIのコンポーネントに置き換え、簡単なスタイルを適用しました。 今回はuseStyleにプロパティを渡して、プロパティごとに表示を切り替えます。 ★前回の記事 yucatio.hatenablog.com 今回の変更点 日曜日と土曜日の日…
前回までで基本的なカレンダーの機能を作成することができました。今回は見た目を整えて行きましょう。Material-UIを利用します。 ★前回の記事 yucatio.hatenablog.com 今回の変更点 余白を作成する Material-UIのボタンを使用する ボタンを左端、中央、右端…
★前回の記事 yucatio.hatenablog.com 現在はデフォルトのテーマカラーを使用していますが、これを自分の好きな色に変えます。 今回はマテリアルデザインのカラーツールを使用します。 primaryとsecondaryの色を選択します。選択すると左側の画面にすぐに反映…
★前回の記事 yucatio.hatenablog.com タスクの送信状態を表示するように変更します。タスクの各行に送信状態を表すアイコンを表示します。 今回のタスク管理アプリの場合、送信状態を表示することは必須ではありませんが、 チャットアプリのような相手がいて…
★前回の記事 yucatio.hatenablog.com Material-UIのSnackbarを使用して、メッセージを表示します。Snackbarは、画面の端から出てきて1行程度のお知らせを表示するエリアのことです。 未ログイン時の更新エラー(NOT_AUTHENTICATED_ON_TODO_ACTION)と通信エラ…
★前回の記事 yucatio.hatenablog.com Material-UIのDrawerを使用して、タスクのフィルタを行うボタンを右側に配置します。 ファイル名とコンポーネント名の変更 タスクのフィルタ用のボタンがフッターではなくなるので、Footer.jsのファイル名を変更します。…
★前回の記事 yucatio.hatenablog.com 前回に引き続き、ログイン名の横とタスク一覧に表示されるユーザ名の横にAvatarを追加します。 ログイン名の横にAvatarを表示する ログイン時、AppbarにAvatarを表示します。今後の実装のために、ユーザ名とavatarUrlをs…
★前回の記事 yucatio.hatenablog.com Material-UIを使用して最近の更新にユーザアイコンを表示します。 "最近の更新”にAvatarを表示する Cloud Functionsの変更 "最近の更新”にユーザアイコン(Avatar)を表示します。 先に、Cloud Functionsを変更して、/rece…
★前回の記事 yucatio.hatenablog.com ログアウトのボタンの常時表示をやめ、ユーザ名がクリックされた時にログアウトメニューが出るように変更します。Material-UIのMenuを使用します。 Loginコンポーネントの内部stateにanchor(アンカー:ここではメニューの…
★前回の記事 yucatio.hatenablog.com Appbarはいわゆるwebページのヘッダーで、ロゴやメニューなどを表示するのに使用します。 今回はログイン機能とナビゲーション機能をAppbarに載せます。ディレクトリ階層の変更とファイル名の変更も行います。 変更前と…
★前回の記事 yucatio.hatenablog.com タスク一覧にスタイルを適用する 前回と同様にタスク一覧にもスタイルを適用します。Paperの周りにマージンを設定し、Paperの中に余白を設定します。 src/components/todos/index.js import { compose } from 'redux' //…
★前回の記事 yucatio.hatenablog.com Material-UIにおいて個別にスタイルを適用するには、stylesオブジェクト(またはstyles関数)とwithStyleを使用します。 前回適用したPaperの周りにマージンと中に余白(padding)を設定します。 ダッシュボードにスタイルを…
★前回の記事 yucatio.hatenablog.com Material-UIのPaperを使用し、コンテンツが紙の上に載っているようなUIにします。 最新の更新一覧とタスク一覧をPaperの上に載せます。 最新の更新一覧でPaperを使う 最新の更新をPaperで囲みます。<div>を<Paper>に変更します。 src</paper></div>…
★前回の記事 yucatio.hatenablog.com Material-UIのコンポーネントで囲まれていない文字列をTypographyで囲っていきます。 なお、一部はこの後のページでMaterial-UIのコンポーネントに変換するので、変換しない文字列もあります。 NoMatchページ 始めにNoMa…
★前回の記事 yucatio.hatenablog.com データの読み込み中、"読み込み中"という文言での表示から、CircularProgressへ変更します。CircularProgressは読み込み中を示すぐるぐるです。 "最近の更新"の読み込み表示の変更 src/components/dashboard/recentUpdat…
★前回の記事 yucatio.hatenablog.com 前回に引き続き、<ul>を<List>に、<li>を<ListItem>に変更します。 今回はタスク一覧です。 タスク一覧でMaterial-UIのListを使用する <ul>を<List>に変更します。また、後で必要になるので、isOwnTodosをpropsとしてTodoコンポーネントに渡します。 src/co</list></ul></listitem></li></list></ul>…
★前回の記事 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>…
★前回の記事 yucatio.hatenablog.com 続いて、<input>を<TextField>に変更します。 inputのref <input>でref属性を使用している場合は、<TextField>に変更する際にいくつか注意点があります。 ref属性をinputRef属性に変更する <input>への参照を保存する変数はクラス変数にする 上記の変更も同時に行う</textfield></textfield>…
★前回の記事 yucatio.hatenablog.com 既存のコンポーネントをReactのコンポーネントに置き換えていきます。 まずは<button>を<Button>に置き換えます。 なお、一部ボタンはこの後のページでMaterial-UIのコンポーネントに変換するので、変換しないものもあります。 Material-</button></button>…
★前回の記事 yucatio.hatenablog.com Material-UIを使用するのに必要なパッケージのインストールと設定を行います。 パッケージのインストール Installation - Material-UI を参考に進めていきます。 @material-ui/coreのインストール 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公式ページにSVGアイコンの色の変え方が載っています。 material-ui.com color属性 テーマカラーの色を使用する場合には、color属性を使用します。 ’inherit' 'primary' 'secondary' 'action' 'error' 'disabled’ のうち1つを指定することで色を…
Material-UIのprimaryとsecondaryの色の変え方がわからなかったのでメモ。 デフォルトの色 デフォルトでは、primaryはindigo, secondaryはpinkです。 primaryとsecondaryの色を変更する primaryとsecondaryの色を自分の好きな色に変えていきます。 １. 色を…
ReactでinputRef使用時、参照を保持する変数がundefinedになり、エラーが発生しました。その原因と対処法を紹介します。 先に結論 参照を保持する変数は、ローカル変数でなく、インスタンス変数にします。インスタンス変数はReact.Componentを拡張したクラス…
TextFieldでrefを使う Material-UI導入時、inputをTextFieldに置き換える時に、多くの属性は<input>を<TextField>に置き換えた際そのままでよいのですが、refはそのままにすると動きません。refをinputRefに変更する必要があります。 変更前 const AddTodo = ({dispatch}) => {</textfield>…
Material-UIのwithStyleとreacrt-reduxのconnect react-reduxを利用しているアプリにMaterial-UIのstylesを組み込む、もしくはその逆を行うときに、どのようにすれば分からなかったので書いておきます。 connectを使用したコンポーネント↓ import React from…
