reactjs - 带有滚动条的 GridListTile

Question

我正在使用 Material-UI 在我的 React 应用程序中制作网格 UI。我需要应用两件事 - 第一次加载主页时应该显示 6 部电影，并且应该有一个滚动条来水平滚动电影。

我不知道如何在 GridListTile 属性上应用滚动条行为。

将 Cols 设置为 6 的 GridListTile 在应该只显示 6 部电影时显示超过 6 部电影。我应该怎么做才能纠正这个？

     return (
        <div className="home-container">
            <Header />
            <div className="heading">
                Upcoming Movies
            </div>
            <div className="img-container">
                {
                    <Grid container>
                        {
                            poster ? poster.map((movie) => (
                                <GridListTile key={movie.id} cellHeight={250} cols={6}>
                                    <img src={movie.poster_url} />
                                    <GridListTileBar title={movie.title}>
                                    </GridListTileBar>
                                </GridListTile >
                            ))
                                : "Loading..."
                        }
                    </Grid>
                }
            </div>
        </div >
    )
}

标签： reactjsmaterial-ui