Css 材质UI网格列表行有很大的间隙

我正在将材质UI与Reactjs一起使用。我对网格列表组件有问题。我正在尝试使用一个网格-1000x1000px，因此我在文档中指定了自定义网格列表样式中的高度和宽度分别为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>
    );
  }
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
将*作为动作从“../actions”导入；
从“材质ui/GridList”导入{GridList，GridTile}；
从“语义ui反应”导入{Container}；
常量样式={
根目录：{
“显示”：“flex”，
“flexWrap”：“wrap”，
“为内容辩护”：“周围空间”，
},
网格列表：{
“宽度”：1000，
“高度”：1000，
“溢出”：“自动”，
},
因德维尔：{
“边界半径”：25，
}
};
常数tilesData=[
{
img:“/img/sample/alex-wong-17993.jpg”，
标题:"早餐",，
作者：jill111，
},
{
img:“/img/sample/casey-horner-339165.jpg”，
标题：“美味汉堡”，
作者：“pashminu”，
},
{
img:“/img/sample/danny-postma-302063.jpg”，
标题:"相机",，
作者：'Danson67'，
},
{
img:“/img/sample/derek-thomson-330312.jpg”，
标题:"早上",，
作者：“fancycrave1”，
},
{
img:“/img/sample/hermansyah-352364.jpg”，
标题:"帽子",，
作者：《汉斯》，
},
{
img:“/img/sample/kalen-emsley-99660.jpg”，
标题：“亲爱的”，
作者：“fancycravel”，
},
{
img:“/img/sample/lachlan-dempsey-397956.jpg”，
标题:"蔬菜",，
作者：jill111，
},
{
img:“/img/sample/linas-bam-223729.jpg”，
标题：“水厂”，
作者：“BkrmadtyaKarki”，
},
{
img:“/img/sample/michal-kmet-257136.jpg”，
标题：“水厂”，
作者：“BkrmadtyaKarki”，
},
{
img:“/img/sample/mohdamed-ali-340700.jpg”，
标题：“水厂”，
作者：“BkrmadtyaKarki”，
},
{
img:“/img/sample/ng-55633.jpg”，
标题：“水厂”，
作者：“BkrmadtyaKarki”，
},
{
img:“/img/sample/xan-griffin-419096.jpg”，
标题：“水厂”，
作者：“BkrmadtyaKarki”，
},
];
类块扩展组件{
render（）{
返回(
{tilesData.map（（tile）=>(
))}
);
}
}

---

我的材质UI版本是“^0.20.0”

本例中的问题是网格列表样式中定义的高度，它迫使容器向外拉伸单元格容器。删除或将其设置为自动修复间距：

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

---

你能在中尝试一下你的简单代码并在这里分享吗？下面的答案很有效