Warning: Failed prop type: The prop `justify` of `ForwardRef(Grid)` is deprecated. Use `justifyContent` instead, the prop was renamed

Question

Can someone help me in solving this error. I am unable to rectify this error. this is what i got in the browser's console

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;

Answer 1

Note that The prop justify is deprecated, use justifyContent instead. So, replace justify by justifyContent.

Before :

<Grid container **justify="space-between"** alignItems="center" spacing={4}>

After:

<Grid container **justifyContent="space-between"** alignItems="center" spacing={4}>

Answer 2

I was checked official document but no luck, after that I did custom styling in following way and it work fine for me.

Error:

<Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
>

Solution:

<Grid
  container
  direction="row"
  style={{justifyContent:"center"}}
  alignItems="center"
>