MUI 中的响应式 imageList？

Question

我想imageList根据显示宽度（又称媒体查询）减少列数，但它无法正常工作。例如：

<ImageList variant="masonry" cols={{ xl: 3, md: 2, sm: 1 }} gap={18}>
  {images.map((image) => (
    <ImageListItem key={image.id}>
      <img
        src={image.urls.regular}
        srcSet={image.urls.regular}
        alt={image.alt_description}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

如果我这样做，我只会得到 1 列，如果我尝试cols={3}，我会得到 3 列。有小费吗？

Answer 1

您可以根据主题媒体查询动态更改列数。使用这样的东西：

const matchDownMd = useMediaQuery(theme.breakpoints.down('sm'));

所以你可以稍后像这样使用它：

cols={matchDownMd ? 1 : 2 }