材质 UI 卡片视图未显示

Question

我正在我的网页中添加卡片视图。但是卡片中的内容会在普通视图而不是卡片视图中加载。 这是我尝试过的示例代码：

import React, { Component } from "react";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import Card from "@material-ui/core/Card";

import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import { makeStyles } from "@material-ui/core/styles";
import CardActionArea from "@material-ui/core/CardActionArea";

class HomePage extends Component {
  render() {
    return (
      <div>
        <div className={{ flexGrow: 1 }}>
          <AppBar style={{ background: "#0080ff" }} position="static">
            <Toolbar>
              <Typography
                color="inherit"
                variant="h4"
                className={{ flexGrow: 1 }}
              >
                My Page
              </Typography>
              <Button color="inherit">Home</Button>
            </Toolbar>
          </AppBar>
        </div>
        <div>
          <Card className={{ maxWidth: 345 }}>
            <CardActionArea>
              <CardMedia
                className={{ height: 140 }}
                image="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"
                title="My App"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="h2">
                  Welcome to My APP
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size="small" color="primary">
                Go to Login Page
              </Button>
            </CardActions>
          </Card>
        </div>
      </div>
    );
  }
}

export default HomePage;

内容已加载但没有卡片视图。我检查了材料ui网站card in material ui website但我不知道我做错了什么。帮我解决一些问题

这是我没有卡片视图的输出页面：

Answer 1

尝试在卡片媒体中添加以下道具。

component="img"

像制作样式对象一样单独添加样式。不在类名中添加样式。

卡片视图中没有加载哪些数据？能不能详细点！

Answer 2

我遇到了同样的问题。它是通过将 HomePage 组件包装在 Container 中来解决的

 <Container>  
 <HomePage />
 </Container>