我正在使用 Material UI 和 Reactjs。我对网格列表组件有疑问。我尝试使用网格 - 1000x1000px,因此我将自定义 gridList 样式中的高度和宽度分别指定为 1000 和 1000,如文档中所示。应有 10 列,每个单元格的高度应为 100px。
当网格列表中的行数超过 1 行时,就会出现问题。行元素之间的间隙太大。我尝试覆盖 CSS 样式,但它们都不能很好地工作。我希望网格单元的行能够堆叠在彼此的正下方,而不是在它们之间有这么大的间隙。
单击此处查看尴尬的单元格行间隙 https://i.stack.imgur.com/OHAm3.jpg
这是我的代码,
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>
);
}
}
我的 Material UI 版本是"material-ui": "^0.20.0"