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

Question

I'm currently working on a React web app using Material-UI. I've been experimenting with the Card component to see how it works. I am currently running the following code:

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

It's some pretty simple code for sure. However, when running this on Chrome, I get the following two error messages in the inspection console:

It seems really odd to me that the className for the div is not throwing errors but the className for the Card and CardMedia are throwing red flags. I don't see what I'm doing wrong as I think I'm using the className tag the way Material-UI is using it in their examples. Any constructive input whatsoever would be awesome as well!

`const classes = useStyles();` Forgot the parens to invoke the hook. Typo. — Drew Reese, Apr 18 '20 at 20:21
The div does not have a propType contrary to the Card component — Axnyff, Apr 18 '20 at 20:21
I don't know about ```Material-UI```. But you mean ```style={classes.cardBounds}```?? — Sajeeb Ahamed, Apr 18 '20 at 20:23

score 3 · Accepted Answer · answered Apr 18 '20 at 20:22

Use Material-UI style hooks 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}>

score 2 · Answer 2 · answered Apr 18 '20 at 20:23

You have to use the makeStyles hook like this:

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

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

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

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

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

2 Answers2