Estoy tratando de crear una plataforma de comercio electrónico en React JS. Estoy siguiendo tutoriales de Youtube. No sé cuál es el problema, pero los estilos de los componentes de estilos no se aplican correctamente, cotejé el código con el código del tutor en varios códigos, pero no pude averiguar cuál es el problema. ¿Alguien puede detectar el problema?

Componente Productos.jsx

 import React from 'react' import {Card, CardMedia, CardContent, CardActions, Typography} from '@material-ui/core' import { IconButton } from '@material-ui/core' import { AddShoppingCart} from '@material-ui/icons' import useStyles from './styles' const Product = ({product}) => { const classes = useStyles(); return ( <Card className={classes.root}> <CardMedia className={classes.media} image={product.image} title={product.name} /> <CardContent> <div className={classes.CardContent}> <Typography variant="h5" gutterBottom> {product.name} </Typography> <Typography variant="h5"> {product.price} </Typography> </div> <Typography variant="body2" color="textSecondary">{product.description}</Typography> <CardActions disableSpacing className={classes.CardActions}> <IconButton aria-label="Add to Cart"> <AddShoppingCart/> </IconButton> </CardActions> </CardContent> </Card> ) } export default Product

Estilos. el archivo js está aquí

 import { makeStyles } from "@material-ui/core"; export default makeStyles(() => ({ root: { maxWidth: "100%" }, media: { height: 0, paddingTop: '56.25%' }, carrdActions: { display: 'flex', justifyContent: 'flex-end' }, cardContent: { display: 'flex', justifyContent: 'space-between' } }))

¡Cualquier ayuda es apreciada!