状態が維持されない場合、指定している要素が間違っている可能性があります。コードを確認して、選択している要素が正しいかどうか確認してください。私も全く同じミスをやらかしましたので、皆様もご注意ください。ご参考になれば幸いです。【Vue.js】コンポーネントの持つ値をCSSに伝えるVue.jsで小さなコンポーネントを作っていると時折デザインの一部をコンポーネントを呼び出す側で自由に決定させたい時があります。この記事ではそのやり方を紹介します。コンポーネントの持つ値をCSSに伝えるために重要な機能はCSSにおける変数であるカスタムプロパティです。MDNカスタムプロパティは次のように用います。カスタムプロパティの適用対象は定義したHTMLElementの子方向の要素全てです。*/}コンポーネントのルートエレメント上でコンポーネントの持つ値を用いてカスタムプロパティを定義することでCSSへ任意の値を与えます。これは例えば次のようにpropsで与えられた値をcomuputedでまとめ、まとめた値をルートエレメントであるdiv.check-boxのスタイルとして定義、定義した変数をCSS内で扱う、というやり方です。}</style>上記コードの動作は次のデモの通りです。いたるところでサイズをemで指定していますが変数を介しているためデザインを崩さずデザインを容易に変更できます。変数はコンポーネントのプロップで決定しているため、コンポーネントを呼び出す側が安全にデザインを変えられます。この変数渡しのやり方に加えて、アニメーションや状態の定義と変化を用いることで自由に簡単に扱える最小単位のコンポーネントを作りやすくなります。余談ですが、カスタムプロパティを用いる際、CSS独立ファイルでは未定義の変数名を呼び出そうとするか、定義セレクタを多量にコピペすることになり辛くなります。SCSSの様な階層構造を定義できるCSS拡張言語を用いると安全に簡潔に記述できます。【React】Material-UIのListsコンポーネントのrightIconButtonについてちょっとハマったので、対応方法をまとめ。プロジェクトでマテリアルデザインを導入するために利用している「Material-UI」というフレームワークについてです。コンポーネントを使ってリストを作成しているのですが、リストアイテムの右端にアイコンボタンを設置したとき、ボタンを押すとリストアイテムまで反応してしまうという現象が発生していました。バージョンが古いのも問題なのでしょうが...依存関係の問題もあり、まだアップデートができていません。時間を見つけて行いたいと思います。サンプルのコードはこちら。クリックイベントは発火しないと書かれているのですが...。面倒くさくなってしまったため、力業で解決することにしました。それが下記のコードです。