如何在 React 中使用 Material UI 组件

Question

我是 React 和 Material UI 的新手，我无法弄清楚如何使用带有样式的组件作为示例。我从文档中有这个卡片组件（以带有蜥蜴的卡片为例）

https://material-ui.com/demos/cards/

我如何在我的类组件中使用它？如果我只复制渲染它可以工作，但不会得到与示例相同的结果。这是什么？

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

export default withStyles(styles)(ImgMediaCard);

我尝试在线搜索，但我无法弄清楚任何帮助表示赞赏

我的课

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来自withStyleshoc 的类。styles是您定义样式 css 的函数。因此，请确保正确导入所有内容。在styles变量中，它也可以是纯对象，这意味着它不必是函数。

// import statements

const styles = theme => ({
    "myCustomClass": {
        fontFamily: "Arial"
    }
})

class App extends React.Component {
    state = {
        ...
    }

    render () {
        const { classes } = this.props;

        return <div className={classes.myCustomClass}>My custom class</div>
    }
}

export default withStyles(styles)(App);