How to use Material UI component in react

Question

I'm new to react and to Material UI, and I can't figure out how to use their components with their styling an example would be. I have this card component from the docs (take the card with the lizard as example)

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

How do I use it in my class component? If i copy just the render it works but don't get the same result as the example. What is this?

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

export default withStyles(styles)(ImgMediaCard);

I tried searching online but I can't figure it out any help is appreciated

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

What is the actual difference to the example? Can you share screenshots? And for the sake of a solution the code you are using - How you use the card in the render? What styling to you attach? — Jonathan Stellwag
There is no major difference to the example but I can't understand how it works — Leonardo Drici

Kyaw Siesein Kyaw Siesein · Accepted Answer · 2018-10-18T10:56:35

First of all classes is the props which came from withStyles hoc. styles is the function where you define your style css. So, make sure you import everything properly. In styles variable, it can be pure object as well which means it doesn't have to be a function.

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

How to use Material UI component in react

1 Answers