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”

像创建样式对象一样单独添加样式。不要在类名中添加样式。

卡视图中没有加载什么数据？请您详细点！

MaterialUI卡视图未显示

1 个答案: