マテリアルUIグリッドリスト大きな不自然なギャップのある行

Question

ReactjでマテリアルUIを使用しています。グリッドリストコンポーネントに問題があります。私はグリッドを持つようにしようとしています - 1000x1000pxので、高さと幅をカスタムgridListスタイルでそれぞれ1000と1000としてドキュメントに指定しました。列数は10で、各セルの高さは100ピクセルにする必要があります。

グリッドリストに複数の行があると問題が発生します。行要素間に大きすぎるギャップがあります。私はCSSスタイルをオーバーライドしようとしましたが、うまく動作しませんでした。私はグリッドセルの行が間に大きなギャップを持つ代わりに、互いのすぐ下にスタックすることを期待します。ここでawkward cell row gap

を見るにはここをクリックしてください

をクリックして

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> 
    ); 
    } 
} 

私の材質UIバージョン、私のコードである。この場合、"material-ui": "^0.20.0"

Answer 1

問題がgridListスタイルで定義された高され、コンテナがセルコンテナを引き出すことが強制されます。削除そのまたは自動に設定するには、間隔が修正されています。

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