マテリアルUIのタッチリップルコンポーネントをカスタムエレメント/コンポーネントに適用する

Question

マテリアルUIアプリケーションに列と（アイコン）ボタンがあるリストがあります。

リスト内のアイテムをクリックすると、マテリアルデザインの波及効果が得られます。

マテリアルUIのリストには、残念なことにカスタムリストが使用されているためクリックしたときに波紋効果が発生します（複数の列と他のカスタマイズが必要なため）波紋効果はありません私はdivを使ってリストを作成しています）。

マテリアルUIにはリップル効果を持つすべてのコンポーネント（これはinternalディレクトリにあります）に使用されているコンポーネントTouchRippleがあります。カスタムリストアイテムをTouchRippleコンポーネントにラップしようとしましたが、残念なことに、実際のリスト項目の位置とサイズに関係なく、アニメーションはページの上部に表示されますが、基本的には動作しません。

私の質問はどうですか、もしそうなら、私のカスタムコンポーネントでTouchRippleコンポーネントを使って波紋エフェクトを追加するにはどうしたらいいですか？

Answer 1

私はそれを動作させる方法を考え出しました。

TouchRippleで生成された親divにスタイルを追加するだけで、正しい位置とサイズでリップルが作成されました。