如何在MUI GridList组件中实现瓦片项的横向滚动功能？

核心改动点 #

• 给GridList添加自定义样式，设置flexWrap: 'nowrap'禁止自动换行，overflowX: 'auto'开启横向滚动
• 将GridList的cols属性设置为图片数组的总长度，保证所有瓦片项都排列在同一行
• 可选：给GridListTile添加固定宽度样式，避免瓦片被压缩变形；可以额外加样式隐藏滚动条，视觉效果更统一

修改后完整代码 #

import React,{ useState} from "react";
import Header from "../../common/header/Header";
import "./Home.css";
import { GridList, GridListTile, GridListTileBar} from "@material-ui/core";

const images = [
    { thumbnail: { uri: 'https://lorempixel.com/200/200/animals',name:'animals'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/nature'  ,name:'nature'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
  ];

export default function Home() {
  return (
    <>
      <Header></Header>
      <header className="head">Upcoming Movies</header>
        <GridList 
          cellHeight={180} 
          cols={images.length}
          style={{
            display: 'flex',
            flexWrap: 'nowrap',
            overflowX: 'auto',
            // 可选：隐藏滚动条样式，不需要可以删除
            '&::-webkit-scrollbar': { display: 'none' },
            msOverflowStyle: 'none',
            scrollbarWidth: 'none'
          }}
        >
            {images.map((image, index) => (
            <GridListTile key={index} style={{ width: 200 }}>
                <img src={image.thumbnail.uri} alt={image.thumbnail.name} />
                <GridListTileBar
                    title={ image.thumbnail.name}
                />
            </GridListTile>
            ))}
        </GridList>
    </>
  );
}

内容的提问来源于stack exchange，提问作者abhishek narayan