具有gridlisttiles的BreakPoints

Question

有没有可能将sm={12} lg={6}放在网格列表磁贴组件上，以便它们在小屏幕上占据整个屏幕，但在大屏幕上只占半个屏幕？如果不是，有没有办法使网格列表重新组织，以便在较小的屏幕上每行有较少的网格列表磁贴？如有任何帮助，我们不胜感激！

Answer 1

您将需要使用Material UI的breakpoints来检测设备尺寸。您可以使用一个更高级别的组件withWidth来使属性width在您的组件中可用。

现在，在您的组件中，您可以根据自己的要求更改GridList的cols属性。

就像这样

<GridList className={classes.gridList} cols={this.props.width === 'sm' ? 12 : 6}>

注意:默认情况下，网格列表占据了父容器的全部宽度。