Как использовать компонент Material UI в реакции - PullRequest
Новая
       7

Как использовать компонент Material UI в реакции

0 голосов
/ 18 октября 2018

Я новичок, чтобы реагировать и на Material UI, и я не могу понять, как использовать их компоненты с их стилем.У меня есть этот компонент карты из документов (возьмите карту с ящерицей в качестве примера)

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

Как сделатьЯ использую это в моем компоненте класса?Если я копирую только рендер, он работает, но не получает тот же результат, что и в примере.Что это? 

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

1 Ответ

0 голосов
/ 18 октября 2018

Прежде всего, это класс props, полученный от withStyles hoc.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);
...