如何让这张卡在mui中的高度相同? 我不喜欢设置固定的高度。这将需要动态地改变。所有卡片高度都需要设置网站中最高的高度是多少。 在按钮和内容之间我们可以添加空间。如何做到这一点?
您似乎面临的问题是您想要使用 Material-UI 库创建具有可变内容高度的卡片,但您希望所有卡片具有相同的高度而不设置固定高度。您还想在按钮和内容之间添加空格。
代码沙盒
function ItemRow({ page_block }) {
return page_block.map((page_block_item, index) => (
));
}
const Card = ({ page_block_item: block_detail }) => {
const [open, setOpen] = useState(false);
const router = useRouter();
const [cart, setCart] = useAtom(cartAtom);
return (
{block_detail.info_action_button?.text}
);
};
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
默认情况下,每个网格项具有相同的最大高度。 您可以将网格项下的组件的高度设置为
100%。这是一个例子。 https://stackblitz.com/edit/react-8qnvck?文件=demo.tsx,MediaControlCard.tsx
在此示例中,
MediaControlCard组件使用Card和sx属性,将高度设置为 100%。如果删除
sx属性,您将看到与您的情况类似的情况。而且我认为您不需要在
Box组件中使用display:flex。 因为如果你使用display:flex,则height:100%不会生效。