Can someone please help me understand how to apply styles to a component using MaterialUI? I've been reading the documentation but it's all very confusing to me. What exactly are classes and how do I connect the const style to the BeerList component?
I keep getting an error in my code saying "Cannot read property of classes undefined." I know I must be passing the wrong props, but I'm not sure how to resolve it...
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);