MUI卡片仅显示Overlay部分，后续内容无渲染问题求助

代码片段 #

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;

问题描述 #

我通过props将数据从父组件传递至子组件，并在Card组件中对props进行映射渲染。但当前遇到问题：卡片仅能显示到classes.overlay部分，后续内容完全不显示，甚至在开发者工具的Elements面板中也无法查看到对应代码。我刚接触MUI，不清楚问题根源，恳请告知问题原因及修复方法。

问题原因 #

你犯了MUI组件结构的基础错误：CardMedia组件仅用于承载媒体内容（比如图片）及少量叠加在媒体上的元素，不能直接嵌套CardContent、CardActions这类属于Card布局的核心组件。这些组件被放在CardMedia内部时，会被MUI的组件逻辑过滤，导致无法渲染，所以Elements面板里也看不到它们。

修复方法 #

把CardContent、CardActions以及details这类不属于媒体层的元素，从CardMedia中移出，作为Card组件的直接子元素。调整后的代码如下：

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>
        <div className={classes.overlay2}>
          <Button style={{ color: "white" }} size="small" onClick={() => {}}>
            <MoreHoriz fontSize="default" />
          </Button>
        </div>
      </CardMedia>
      {/* 以下元素移出CardMedia，作为Card的直接子元素 */}
      <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;

说明 #

• CardMedia仅保留媒体层需要的overlay和overlay2，负责展示图片及顶部的创作者信息、操作按钮。
• details、CardContent、CardActions按照MUI的Card布局规范，作为Card的直接子元素排列，这样所有内容就能正常渲染了。

内容的提问来源于stack exchange，提问作者Sohaib Butt