Question

我是新来的对Material UI做出反应的人，我不知道如何将其组件与样式一起使用，例如。我从文档中获得了该卡片组件（以蜥蜴卡片为例）

如何在班级组件中使用它？如果我仅复制渲染器，则可以使用，但不会获得与示例相同的结果。这是什么？

ImgMediaCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ImgMediaCard);

我尝试过在线搜索，但是我想不出任何帮助

Myclass

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import SkipNextIcon from "@material-ui/icons/SkipNext";
import Grid from "@material-ui/core/Grid";

export default class Serie extends Component {
  constructor(props) {
    super(props);

    this.state = {
      serie: this.props.serie
    };
  }

  componentDidMount() {}

  render() {
    const { id, title, apiname, description, image, likes } = this.props.serie;
    return (
      <Grid item xs={4}>
        <Card >
          <div >
            <CardContent >
              <Typography component="h5" variant="h5">
                {title}
              </Typography>
              <Typography variant="subtitle1" color="textSecondary">
                Mac Miller
              </Typography>
            </CardContent>
            <div>
              <IconButton aria-label="Previous">
                <SkipNextIcon />
              </IconButton>
              <IconButton aria-label="Play/pause">
                <PlayArrowIcon />
              </IconButton>
              <IconButton aria-label="Next">
                <SkipNextIcon />
              </IconButton>
            </div>
          </div>
          <CardMedia
            image={image}
            height="140"
            title=" image"
          />
        </Card>
      </Grid>
    );
  }
}

Answer 1

首先是props的{{1}}类。 withStyles是定义样式css的函数。因此，请确保正确导入所有内容。在styles变量中，它也可以是纯对象，这意味着它不必是函数。

styles

如何在React中使用Material UI组件

1 个答案: