Estoy tratando de estirar el componente de cuadrícula cuando uno de los componentes de la tarjeta tiene texto adicional.
Encuentre el código de muestra aquí:
https://codesandbox.io/s/mediacard-demo-material-ui-forked-xpme4r?file=/demo.js:283-290
Cuando cambio los elementos de alineación a "flex-end" o "center", funciona.
Pero alignItems: "estirar" no funciona.
Uso de la versión 5 de MUI
Cualquier sugerencia sería útil.
El problema está resuelto. Agregué las alturas a la tarjeta y la hice receptiva. Podría ser útil para usted.
import React from "react"; import { Grid, Card } from "@mui/material"; import CardActions from "@mui/material/CardActions"; import CardContent from "@mui/material/CardContent"; import { makeStyles } from "@mui/styles"; const useStyles = makeStyles((theme) => ({ stretch: { height: "100%" } })); export default function MediaCard() { const classes = useStyles(); return ( <Grid container spacing={3} justify="space-between" alignItems="stretch"> <Grid item xl={2} lg={2} md={6} xs={12}> <Card className={classes.stretch}> <CardContent>Card A</CardContent> <CardActions> Card A action // Card A actions // Card A actions //Card A actions// Card A actionsactions// Card A actionsactions// Card A actionsactions// Card A actions </CardActions> </Card> </Grid> <Grid item xl={2} lg={2} md={6} xs={12}> <Card className={classes.stretch}> <CardContent> Card B content</CardContent> <CardActions> Card B actions</CardActions> </Card> </Grid> <Grid item xl={2} lg={2} md={6} xs={12}> <Card className={classes.stretch}> <CardContent>Card B content</CardContent> <CardActions> Card B actions</CardActions> </Card> </Grid> </Grid> ); }