Как понять компонент в стиле MaterialUI?

Question

Я пытаюсь понять, как добавить стили в компонент с помощью MaterialUI, и я очень запутался!Может кто-нибудь объяснить, пожалуйста, что я сделал не так?Я прочитал документацию, но она, честно говоря, не имела смысла для меня.Какие уроки?И как мне добавить стиль const в компонент BeerList?

Мой код выдал ошибку «Невозможно прочитать свойство классов не определено. Я знаю, что, должно быть, извлек неправильный реквизит. Но я не знаю, как это исправить ...

 import React from 'react';
import BeerListItem from './BeerListItem';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import IconButton from '@material-ui/core/IconButton';
import StarBorderIcon from '@material-ui/icons/StarBorder';

const styles = theme => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
     overflow: 'hidden',
     backgroundColor: theme.palette.background.paper,
    },
    gridList: {
      width: '100%',
      height: '100%',
      transform: 'translateZ(0)',
    },
    titleBar: {
      background:
        'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
        'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)'
      },

    icon: {
      color: 'white',
    },
  });

const BeerList = ({beers}) =>{
const {classes} = beers;
    const beerItems = beers.map((beer) => {
        return <BeerListItem  key={beer.id} beer = {beer}/> 
      });
      return (<div className={classes.root} >
       <GridList cellHeight={250} spacing={1} >
      {beerItems}
      </GridList>
      </div>);
    };


export default withStyles(styles)(BeerList);

Answer 1

занятия отвлекаются от реквизита.вам нужно немного изменить компоненты, например:

const BeerList = (props) =>{
const {classes, beers} = props;

  // rest of your code
  return <div className={classes.root} >
    <GridList cellHeight={250} spacing={1} >
      {beerItems}
    </GridList>
  </div>
};

Вот и все.