为什么卡片内容不显示在MUI

Question

import React from "react";
import {
Card,
CardActions,
CardContent,
Button,
CardMedia,
Typography,
} from "@mui/material";
import ThumbUpAlt from "@mui/icons-material/ThumbUpAlt";
import Delete from "@mui/icons-material/Delete";
import MoreHoriz from "@mui/icons-material/MoreHoriz";
import moment from "moment";
import useStyles from "./styles";
const Post = ({ post }) => {
const classes = useStyles();
return (
<Card className={classes.card}>
<CardMedia
className={classes.media}
image={post.selectedFile}
title={post.title}
>
<div className={classes.overlay}>
<Typography variant="h6">{post.creator}</Typography>
<Typography variant="body2">
{moment(post.createdAt).fromNow()}
</Typography>
</div>
// till here the card is showing
<div className={classes.overlay2}>
<Button style={{ color: "white" }} size="small" onClick={() => {}}>
<MoreHoriz fontSize="default" />
</Button>
</div>
<div className={classes.details}>
<Typography variant="body2" color="textSecondary">
{post.tags.map((tag) => `#${tag}`)}
</Typography>
</div>
<CardContent>
<Typography className={classes.title} variant="h5" gutterBottom>
{post.message}
</Typography>
</CardContent>
<CardActions className={classes.cardActions}>
<Button size="small" color="primary" onClick={() => {}}>
<ThumbUpAlt fontSize="small" />
Like
{post.likeCount}
</Button>
<Button size="small" color="primary" onClick={() => {}}>
<Delete fontSize="small" />
Delete
</Button>
</CardActions>
</CardMedia>
</Card>
);
};
export default Post;

我传递数据从父到子作为一个道具。在这之后，我在card中映射道具。但问题是卡只显示，直到classes.overlay之后什么都没有显示。代码也没有显示在inspect中。我不知道有什么问题，因为我是MUI的新手。

我可以知道问题是什么，以便我可以解决它

Answer 1

是因为您将组件包装在CardMedia标签中，而它应该是一个自关闭标签，所以您的代码应该是这样的:

const Post = ({ post }) => {
const classes = useStyles();
return (
<Card className={classes.card}>
<CardMedia
className={classes.media}
image={post.selectedFile}
title={post.title}
/> // <--- This is the change
<div className={classes.overlay}>
<Typography variant="h6">{post.creator}</Typography>
<Typography variant="body2">
{moment(post.createdAt).fromNow()}
</Typography>
</div>
<div className={classes.overlay2}>
<Button style={{ color: "white" }} size="small" onClick={() => {}}>
<MoreHoriz fontSize="default" />
</Button>
</div>
<div className={classes.details}>
<Typography variant="body2" color="textSecondary">
{post.tags.map((tag) => `#${tag}`)}
</Typography>
</div>
<CardContent>
<Typography className={classes.title} variant="h5" gutterBottom>
{post.message}
</Typography>
</CardContent>
<CardActions className={classes.cardActions}>
<Button size="small" color="primary" onClick={() => {}}>
<ThumbUpAlt fontSize="small" />
Like
{post.likeCount}
</Button>
<Button size="small" color="primary" onClick={() => {}}>
<Delete fontSize="small" />
Delete
</Button>
</CardActions>
</Card>
);
};
export default Post;