Material-UI-Raster-Liste Zeilen mit einer großen unangenehmen Lücke

Question

Ich benutze Material UI mit Reactjs. Ich habe Probleme mit der Grid List Component. Ich versuche, ein Raster zu haben - 1000x1000px, also habe ich die Höhe und die Breite im kundenspezifischen gridList Stil als 1000 und 1000 wie in der Dokumentation spezifiziert. Es sollte 10 Spalten geben und jede Zelle sollte eine Höhe von 100px haben.

Problem tritt auf, wenn ich mehr als 1 Zeile in der Rasterliste habe. Es gibt eine zu große Lücke zwischen den Zeilenelementen. Ich habe versucht, die CSS-Stile zu überschreiben, aber keiner von ihnen funktioniert gut. Ich würde erwarten, dass die Zeilen der Gitterzelle direkt aufeinander gestapelt werden, anstatt eine so große Lücke dazwischen zu haben. hier

Klicken Sie auf die awkward cell row gap

Hier ist mein Code,

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions'; 
import {GridList, GridTile} from 'material-ui/GridList'; 
import { Container } from 'semantic-ui-react'; 

const styles = { 
    root: { 
    "display": 'flex', 
    "flexWrap": 'wrap', 
    "justifyContent": 'space-around', 
    }, 
    gridList: { 
    "width": 1000, 
    "height": 1000, 
    "overflowY": 'auto', 
    }, 
    indvCell: { 
    "borderRadius": 25, 
    } 
}; 

const tilesData = [ 
    { 
    img: '/img/sample/alex-wong-17993.jpg', 
    title: 'Breakfast', 
    author: 'jill111', 
    }, 
    { 
    img: '/img/sample/casey-horner-339165.jpg', 
    title: 'Tasty burger', 
    author: 'pashminu', 
    }, 
    { 
    img: '/img/sample/danny-postma-302063.jpg', 
    title: 'Camera', 
    author: 'Danson67', 
    }, 
    { 
    img: '/img/sample/derek-thomson-330312.jpg', 
    title: 'Morning', 
    author: 'fancycrave1', 
    }, 
    { 
    img: '/img/sample/hermansyah-352364.jpg', 
    title: 'Hats', 
    author: 'Hans', 
    }, 
    { 
    img: '/img/sample/kalen-emsley-99660.jpg', 
    title: 'Honey', 
    author: 'fancycravel', 
    }, 
    { 
    img: '/img/sample/lachlan-dempsey-397956.jpg', 
    title: 'Vegetables', 
    author: 'jill111', 
    }, 
    { 
    img: '/img/sample/linas-bam-223729.jpg', 
    title: 'Water plant', 
    author: 'BkrmadtyaKarki', 
    }, 
    { 
    img: '/img/sample/michal-kmet-257136.jpg', 
    title: 'Water plant', 
    author: 'BkrmadtyaKarki', 
    }, 
    { 
    img: '/img/sample/mohdammed-ali-340700.jpg', 
    title: 'Water plant', 
    author: 'BkrmadtyaKarki', 
    }, 
    { 
    img: '/img/sample/ng-55633.jpg', 
    title: 'Water plant', 
    author: 'BkrmadtyaKarki', 
    }, 
    { 
    img: '/img/sample/xan-griffin-419096.jpg', 
    title: 'Water plant', 
    author: 'BkrmadtyaKarki', 
    }, 
]; 

class Blocks extends Component { 

    render() { 
    return (
     <Container> 
     <div style={styles.root}> 
      <GridList 
      cellHeight={100} 
      style={styles.gridList} 
      cols={10} 
      > 
      {tilesData.map((tile) => (
       <GridTile 
       key={tile.img} 
       style={styles.indvCell} 
       > 
       <img src={tile.img} /> 
       </GridTile> 
      ))} 
      </GridList> 
      </div> 
     </Container> 
    ); 
    } 
} 

mein Material UI-Version ist "material-ui": "^0.20.0"

Answer 1

Das Problem in diesem Fall zu sehen, die Höhe in den gridList Arten definiert ist, es zwingt den Container, die Zellcontainer auszudehnen. Das Entfernen dieser oder Einstellung es auf Auto fixiert den Abstand:

const styles = { 
    root: { 
    "display": 'flex', 
    "flexWrap": 'wrap', 
    "justifyContent": 'space-around', 
    }, 
    gridList: { 
    "width": 1000, 
    "height": 'auto', 
    "overflowY": 'auto', 
    }, 
    indvCell: { 
    "borderRadius": 25, 
    } 
};