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>…

firebaseでpushのkeyを事前取得 firebaseの公式サイトには、key(ID)の取得は以下のように書いてあります。 // Get a key for a new Post. var newPostKey = firebase.database().ref().child('posts').push().key; react-redux-firebaseでも同様に、 const f…

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

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。--only hostingオプションで、hostingのみ動作するようにします。(functionはserve…

★前回の記事 yucatio.hatenablog.com Firebase Realtime Databaseでは、データの作成日時・更新日時は自動で付与されないので、クライアント側(javascript)で付与します。これに伴い、Cloud FunctionsもDatabaseの更新日時を使用するように変更します。デー…

★前回の記事 yucatio.hatenablog.com componentのファイルが多くなり、管理しづらくなってきたので、画面パーツごとにディレクトリを分けます。 現在のディレクトリ構成と変更後のディレクトリ構成です。 階層の移動と構成 以下に、src/components以下のファ…