Wie bringt man alle Karten in Mui auf die gleiche Höhe?

Question

Wie stelle ich sicher, dass diese Karte in Mui die gleiche Höhe hat? Ich mag es nicht, eine feste Höhe festzulegen. Dies muss sich dynamisch ändern. Alle Kartenhöhen müssen auf die höchste Höhe auf der Website eingestellt werden. Zwischen der Schaltfläche und dem Inhalt können wir Platz hinzufügen. Wie mache ich das?

Das Problem, mit dem Sie offenbar konfrontiert sind, besteht darin, dass Sie mit der Material-UI-Bibliothek Karten mit variabler Inhaltshöhe erstellen möchten, aber alle Karten die gleiche Höhe haben sollen, ohne eine feste Höhe festzulegen. Sie möchten außerdem Platz zwischen der Schaltfläche und dem Inhalt hinzufügen.

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

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

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

在此示例中，MediaControlCard 组件使用 Card 和 sx 属性，将高度设置为 100%。

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

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