如何使用Material UI组件进行反应-Java 学习之路

我是新的反应和材料用户界面，我无法弄清楚如何使用他们的样式与他们的样式一个例子 . 我有来自文档的这个卡组件（以蜥蜴卡为例）

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

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>
    );
  }
}

1 回答

首先是来自 withStyles hoc的 props 类 . 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);

回复于 2024-04-28T15:44:39+08:00

如何使用Material UI组件进行反应

1 回答

相关问题