材质UI网格列表行的间隙很大 [英] Material UI Grid List Rows with a big awkward gap

问题描述

我将Material UI与Reactjs一起使用.网格列表组件有问题.我正在尝试创建一个网格-1000x1000px，所以我在自定义gridList样式中将高度和宽度分别指定为1000和1000(如文档中所示).应该有10列，每个单元格的高度应为100px.

当我在网格列表中有超过 1 行时出现问题.行元素之间的间隙太大.我试图覆盖CSS样式，但是它们都不能很好地工作.我希望网格单元的行彼此堆叠在一起，而不是在它们之间有这么大的间隔.

点击此处查看

I am using Material UI with Reactjs. I have issues with the Grid List Component. I am trying to have a grid - 1000x1000px so I specified the height and width in the custom gridList style as 1000 and 1000 respectively as in the documentation. There should be 10 columns and each cell should have a height of 100px.

Problem comes when I have more than 1 row in the grid list. There is too big a gap between the row elements. I tried to override the CSS styles but none of them work nicely. I would expect the rows of grid cell to stack right below each other instead of having such a big gap in between.

Click here to see the awkward cell row gap

Here is my 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>
    );
  }
}

My Material UI version is "material-ui": "^0.20.0"

解决方案

The issue in this case is the height defined in the gridList styles, it's forcing the container to stretch the cell containers out. Removing that or setting it to auto fixes the spacing:

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

这篇关于材质UI网格列表行的间隙很大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！