Блог

Я пытаюсь создать платформу электронной коммерции в React JS. Я слежу за учебниками с Youtube. Я не знаю, в чем проблема, но стили из компонентов стилей применяются неправильно, несколько раз перепроверял код с кодом преподавателя, но не смог понять, в чем проблема. Кто-нибудь может определить проблему?

Компонент Products.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
 

Стили. файл js находится здесь

 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'
    }
}))
 

Любая помощь будет признательна!

Это должно быть classes.carrdActions :

            <CardActions disableSpacing className={classes.CardActions}>
 

Потому что вы определили это так:

   carrdActions: {
    display: 'flex',
    justifyContent: 'flex-end'
},
 

То же самое с classes.CardContent

пожалуйста, импортируйте стили макияжа из этого:

     import { makeStyles } from "@material-ui/core/styles";
     // not
    import { makeStyles } from "@material-ui/core";
 

Я уверен, что ваша проблема будет решена;