如何使mui中所有卡的高度相同?
P粉300541798
P粉300541798 2024-03-21 19:52:46
[React讨论组]

如何让这张卡在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}
                            
                        
                
            
        
    );
};

P粉300541798
P粉300541798

全部回复(1)
P粉696146205

默认情况下,每个网格项具有相同的最大高度。 您可以将网格项下的组件的高度设置为100%

这是一个例子。 https://stackblitz.com/edit/react-8qnvck?文件=demo.tsx,MediaControlCard.tsx

在此示例中,MediaControlCard 组件使用 Cardsx 属性,将高度设置为 100%。

如果删除 sx 属性,您将看到与您的情况类似的情况。

而且我认为您不需要在 Box 组件中使用 display:flex 。 因为如果你使用display:flex,则height:100%不会生效。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号