const useStyles = makeStyles(theme => ({ root: { display: 'flex' , flexWrap: 'wrap' , justifyContent: 'space-around' , overflow: 'hidden' , backgroundColor: theme.palette.background.paper, }, gridList: { [theme.breakpoints.up( 'md' )]: { width: 500 , height: 450 , }, [theme.breakpoints.down( 'sm' )]: { flexWrap: 'nowrap' , }, transform: 'translateZ(0)' , }, })) const PhotosGrid: React.FC<Props> = ({ photos }) => { const classes = useStyles() const theme = useTheme() const matches = useMediaQuery(theme.breakpoints.down( 'sm' )) return ( < Box className = { classes.root } > < GridList cellHeight = { matches ? 100 : 200 } spacing = { 1 } className = { classes.gridList } > { photos.map(tile => ( < GridListTile key = { tile.photoUrl } cols = { matches ? ...