mui のすべてのカードを同じ高さにするにはどうすればよいですか?

Question

mui でこのカードの高さを同じにする方法は? 私は高さを固定するのが好きではありません。これは動的に変更する必要があります。すべてのカードの高さは、Web サイトで最も高い高さに設定する必要があります。 ボタンとコンテンツの間にスペースを追加できます。どうすればいいでしょうか？

あなたが直面していると思われる問題は、マテリアル UI ライブラリを使用してコンテンツの高さが可変のカードを作成したいが、固定の高さを設定せずにすべてのカードを同じ高さにしたいことです。また、ボタンとコンテンツの間にスペースを追加することもできます。

コードサンドボックス

ああああ

Answer 1

デフォルトでは、各グリッド項目の最大高さは同じです。 グリッド項目の下のコンポーネントの高さを 100% に設定できます。

これは一例です。 https://stackblitz.com/edit/react-8qnvck?ファイル=demo.tsx,MediaControlCard.tsx

この例では、MediaControlCard コンポーネントは Card プロパティと sx プロパティを使用して高さを 100% に設定します。

sx 属性を削除すると、同じような状況が発生します。

そして、Box コンポーネントで display:flex を使用する必要はないと思います。 display:flex を使用すると、height:100% が有効にならないためです。