reactjs - MUI makeStyles 不适用于 Card 组件

Question

我有这个Product基于这个例子的组件。这是我的组件：

Product.tsx：

import useStyles from './useStyles'

const Product: React.FC = () => {
  const classes = useStyles();

  return (
    <Card className={classes.secondaryBorder}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5">
            This is my title
          </Typography>

          <Typography variant="body2" color="text.secondary">
            This is my body
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
};

useStyles.ts：

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  secondaryBorder: {
    border: '2px solid blue',
  },
  flex: {
    display: 'flex',
  },
});

问题是该Card组件没有secondaryBorderie 它周围没有蓝色边框。那么问题是什么？

谢谢！