재질 UI 그리드 목록 큰 어색한 틈이있는 행

Question

Reactj와 함께 Material UI를 사용하고 있습니다. Grid List Component에 문제가 있습니다. 난 그리드 - 1000x1000px 그래서 높이와 너비를 사용자 지정 gridList 스타일을 1000 및 1000 문서로 각각 지정해야합니다. 10 개의 열이 있어야하고 각 셀의 높이는 100px 여야합니다.

그리드 목록에 둘 이상의 행이있을 때 문제가 발생합니다. 행 요소 사이에 너무 큰 간격이 있습니다. 나는 CSS 스타일을 오버라이드하려고했지만 그 중 아무 것도 잘 동작하지 않는다. 그리드 셀의 행이 그 사이에 큰 간격을 두는 대신에 바로 아래에 쌓이는 것을 기대합니다. 여기

클릭,

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 스타일에 정의 된 높이이며, 여기에 awkward cell row gap

내 코드는 볼 수 그것은 컨테이너가 셀 콘테이너를 밖으로 늘리도록 강제합니다. 간격이 해결되는 제거 또는 자동으로 설정 :

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