提供给“Card”的“object”类型的无效道具“className”，应为“string”

Question

我目前正在使用 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 在他们的示例中使用它的方式相同。任何建设性的意见都会很棒！

Answer 1

使用 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}>

Answer 2

您必须像这样使用 makeStyles 挂钩：

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

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

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

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

提供给“Card”的“object”类型的无效道具“className”，应为“string”

Invalid prop `className` of type `object` supplied to `Card`, expected `string`

html

javascript

classname

reactjs

material-ui