Alguien me puede ayudar a solucionar este error. No puedo corregir este error. esto es lo que obtuve en la consola del navegador
const Cart = ({ cart }) => { const classes = useStyles(); const EmptyCart = () => ( <Typography variant="subtitle1"> You have no items in your cart, start adding some!!! </Typography> ); const FilledCart = () => ( <> <Grid container spacing={3}> {cart.line_items.map((item) => ( <Grid item xs={12} sm={4} key={item.id}> <CartItem item={ item }/> </Grid> ))} </Grid> <div className={classes.cardDetails}> <Typography variant='h4'> Subtotal: {cart.subtotal.formatted_with_symbol} </Typography> <Button className={classes.emptyButton} size="large" type="button" variant="contained" color="secondary">Empty cart</Button> <Button className={classes.checkoutButton} size="large" type="button" variant="contained" color="primary">Checkout</Button> </div> </> ) if (!cart.line_items) return '.......loading'; return (<Container> <div className={classes.toolbar} /> <Typography className={classes.title} variant='h3' gutterBottom> Your Shopping Cart </Typography> {!cart.line_items.length ? <EmptyCart /> : <FilledCart />} </Container>); }; export default Cart;Tenga en cuenta que la justificación de la propiedad está en desuso; en su lugar, utilice la justificación del contenido . Por lo tanto, reemplace la justificación por la justificación del contenido .
Antes :
<Grid container **justify="space-between"** alignItems="center" spacing={4}>Después:
<Grid container **justifyContent="space-between"** alignItems="center" spacing={4}>Revisé el documento oficial pero no tuve suerte, después hice un estilo personalizado de la siguiente manera y funcionó bien para mí.
Error:
<Grid container direction="row" justifyContent="center" alignItems="center" >Solución:
<Grid container direction="row" style={{justifyContent:"center"}} alignItems="center" >