Question

我正在跟踪带有水平滚动的水平单行图像网格列表的React Material UI设计。如何根据屏幕尺寸（xm，sm，md，ls）动态更改“ Cols”值？例如md屏幕将为“ 12列”，sm屏幕将为“ 4列”等。

单行网格列表

https://material-ui.com/demos/grid-list/#single-line-grid-list

  <GridList className={classes.gridList} cols={3}>......</GridList>

Answer 1

我们可以尝试@material-ui/core/withWidth的布局断点。

基本上，我们注册宽度变化事件，并根据该计算得出最终的列数

这是我的例子：

import withWidth, { isWidthUp } from '@material-ui/core/withWidth';

const ExampleComponent = (props) => {

    function getCols(screenWidth) {
      if (isWidthUp('lg', screenWidth)) {
        return 5;
      }

      if (isWidthUp('md', screenWidth)) {
        return 3;
      }

      return 2;
    }

    const cols = getCols(props.width); // width is associated when using withWidth()

    return ( < GridList cols={cols}... > ... </GridList>)
  }
  
export default withWidth()(ExampleComponent)

您可以检查一个api以获得更多信息：https://material-ui.com/customization/breakpoints/

如何在React Material-UI中动态更改GridList的cols

1 个答案: