我如何理解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>
};

而已。