Comment faire en sorte que toutes les cartes du mui aient la même hauteur ?

Question

Comment faire en sorte que cette carte ait la même hauteur en mui ? Je n'aime pas fixer une hauteur fixe. Cela devra changer de manière dynamique. Toutes les hauteurs de cartes doivent être définies sur la hauteur la plus élevée du site Web. Entre le bouton et le contenu, nous pouvons ajouter de l'espace. Comment puis-je faire cela?

Le problème auquel vous semblez être confronté est que vous souhaitez créer des cartes avec une hauteur de contenu variable à l'aide de la bibliothèque Material-UI, mais vous souhaitez que toutes les cartes aient la même hauteur sans définir de hauteur fixe. Vous souhaitez également ajouter un espace entre le bouton et le contenu.

Code Sandbox

function ItemRow({ page_block }) {
    return page_block.map((page_block_item, index) => (
        <Grid
            justifyContent="space-between"
            alignItems="center"
            align="center"
            xs={12}
            sm={6}
            md={4}
            lg={4}
        >
            <Grid
                justifyContent="center"
                // alignItems="center"
                xs={10.5}
                sm={12}
                md={11}
                lg={12}
            >
                <Card page_block_item={page_block_item} key={index} />
            </Grid>
        </Grid>
    ));
}

const Card = ({ page_block_item: block_detail }) => {
    const [open, setOpen] = useState(false);
    const router = useRouter();
    const [cart, setCart] = useAtom(cartAtom);

    return (
        <Grid
            key={block_detail.id}
            justifyContent="center"
            display={'flex'}
            flexGrow={1}
            alignItems="stretch"
        >
            <Box
                sx={{
                    position: 'relative',
                    display: 'flex',
                    flexDirection: 'column',
                    height: '100%',
                    boxShadow: '0px 6px 12px -6px rgba(24, 39, 75, 0.12)',
                }}
                justifyContent="space-between"
                border="1px solid #E3E3E3"
                borderRadius="8px"
                overflow="hidden"
                margin={2}
                flexGrow={1}
                alignItems="stretch"
            >
                <Grid sx={{ position: 'relative' }}>
                    <Grid
                        item
                        position="relative"
                        sx={{ aspectRatio: '3/2', height: '100%' }}
                    >
                        <NextImage
                            className="image-cover"
                            media={block_detail.media}
                        />
                    </Grid>
                    <Box
                        sx={{
                            position: 'absolute',
                            right: 0,
                            bottom: 20,
                        }}
                    >
                        <ShareIcon
                            sx={{
                                background: '#FC916A',
                                marginRight: '15px',
                                padding: '5px',
                                height: '30px',
                                width: '30px',
                                borderRadius: '50%',
                                color: '#FFFFFF',
                                cursor: 'pointer',
                                '&:hover': {
                                    background: '#FFFFFF',
                                    color: '#FC916A',
                                },
                            }}
                        />
                        <BookmarkBorderIcon
                            sx={{
                                background: '#FC916A',
                                marginRight: '15px',
                                padding: '5px',
                                height: '30px',
                                width: '30px',
                                borderRadius: '50%',
                                color: '#FFFFFF',
                                cursor: 'pointer',
                                '&:hover': {
                                    background: '#FFFFFF',
                                    color: '#FC916A',
                                },
                            }}
                        />
                    </Box>
                </Grid>

                <Box
                    sx={{
                        flexGrow: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        height: '100%',
                        maxHeight: 'fix-content',
                    }}
                    padding={2}
                >
                    <Grid item sx={{ textAlign: 'left' }}>
                        <StyledText
                            my={1}
                            variant="H_Regular_Tagline"
                            color="primary.main"
                            content={block_detail.info_title}
                        />
                    </Grid>
                    <Grid item sx={{ textAlign: 'left' }}>
                        <StyledText
                            my={1}
                            variant="H_Regular_Body"
                            color="secondary.dark"
                            content={block_detail.info_description}
                        />
                    </Grid>
                </Box>

                <Grid item sx={{ position: 'relative' }}>

                        <Link
                            href={`/${router.query.centerName}/post/donation/${block_detail?.slug}`}
                        >
                            <StyledButton
                                variant="H_Regular_H4"
                                sx={{ width: '90%' }}
                            >
                                {block_detail.info_action_button?.text}
                            </StyledButton>
                        </Link>
                </Grid>
            </Box>
        </Grid>
    );
};

Answer 1

Par défaut, chaque élément de la grille a la même hauteur maximale. Vous pouvez définir la hauteur du composant sous l'élément de grille sur 100%.

Voici un exemple. https://stackblitz.com/edit/react-8qnvck? Fichier = demo.tsx,MediaControlCard.tsx

Dans cet exemple, la propriété MediaControlCard 组件使用 Card 和 sx définit la hauteur à 100 %.

Si vous supprimez l'attribut sx, vous verrez quelque chose de similaire à votre cas.

Et je ne pense pas que vous ayez besoin d'être présent Box 组件中使用 display:flex . Parce que ça ne marchera pas si vous utilisez display:flex，则height:100%.