提供给`Card`的`object`类型的无效prop`className`，应为`string`答案

【问题标题】：Invalid prop `className` of type `object` supplied to `Card`, expected `string`提供给`Card`的`object`类型的无效prop`className`，应为`string`
【发布时间】：2020-08-01 08:59:10
【问题描述】：

我目前正在使用 Material-UI 开发一个 React 网络应用程序。我一直在试验 Card 组件，看看它是如何工作的。我目前正在运行以下代码：

import React from 'react';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';

const useStyles = {
    media: {
        height: 0,
    },
    cardWidth: {
        maxWidth: 345,
    },
    cardBounds: {
        paddingLeft: '10px',
        paddingRight: '10px',
        paddingTop: '10px',
        paddingBottom: '10px',
    }
};

export default function ByteCard(props) {
    const classes = useStyles;
    return(
        <div className= {classes.cardBounds}>
            <Card className={classes.cardWidth}>
                <CardMedia
                            className={classes.media}
                            image={props.byte.image}
                            title={props.byte.name}
                />
            {props.byte.name}
            </Card>
        </div>
    );
}

这肯定是一些非常简单的代码。但是，在 Chrome 上运行此程序时，我在检查控制台中收到以下两条错误消息：

我觉得很奇怪，div 的 className 没有抛出错误，但 Card 和 CardMedia 的 className 却抛出了危险信号。我看不出我做错了什么，因为我认为我使用 className 标记的方式就像Material-UI 在他们的示例中使用它一样。任何建设性的意见都会很棒！

【问题讨论】：

const classes = useStyles(); 忘记了调用钩子的括号。错字。
div没有与Card组件相反的propType
我不知道Material-UI。但你的意思是style={classes.cardBounds}??

标签： javascript html reactjs material-ui classname

【解决方案1】：

你必须像这样使用 makeStyles 钩子：

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

const useStyles = makeStyles({
  yourStyle: {...}
});

export default () => {
  const classes = useStyles();

  return <Button className={classes.yourStyle}>Hook</Button>;
}

【讨论】：

【解决方案2】：

使用 Material-UI 样式挂钩 makeStyles

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
    media: {
        height: 0,
    },
    cardWidth: {
        maxWidth: 345,
    },
    cardBounds: {
        paddingLeft: '10px',
        paddingRight: '10px',
        paddingTop: '10px',
        paddingBottom: '10px',
    }
}));

const classes = useStyles();

<Card className={classes.cardWidth}>

【讨论】：