javascript - 反应 useStyles 不应用样式

Question

我正在尝试在 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'
    }
}))

任何帮助表示赞赏！

标签： javascriptreactjsreact-hooks

Answer 1

这必须是classes.carrdActions：

           <CardActions disableSpacing className={classes.CardActions}>

因为你是这样定义的：

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

与classes.CardContent