css - 我如何理解 MaterialUI 样式的组件？

Question

我正在尝试了解如何使用 MaterialUI 将样式注入(inject)组件，但我很困惑!谁能解释一下我做错了什么？我阅读了文档，但老实说它对我来说没有意义。什么是类？以及如何将 const 样式附加到组件 BeerList 中？

我的代码抛出一个错误“无法读取未定义类的属性。我知道我一定是从错误的 Prop 中提取出来的。但我不知道如何修复它...

 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

从 props 中分离出来的类。您需要对您的组件进行一些更改，例如:

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

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

就是这样。