使 Material UI 网格在反应中水平滚动

Question

我正在做一个 reactjs 项目，我需要连续显示“书籍”。我正在使用 Material UI 网格系统。我成功地在大屏幕上放映了这些书。然而，当屏幕变小时，“书”就会重叠。当屏幕变小而不发生重叠时，我正在尝试使 <Paper> 组件中的行水平滚动。

这是我的带有虚拟数据和codesandbox 的代码。

<Paper elevation={4} className={classes.root}>
    <Grid container spacing={2}>
        <Grid item xs={12}>
            <Typography variant="h6">
                Most Popular Books Of All Times
            </Typography>
        </Grid>
        <Grid item xs={2} md={2}>
            <img src="http://placekitten.com/200/250" alt="Test" />

        </Grid>
        <Grid item xs={2} md={2}>
            <img src="http://placekitten.com/200/250" alt="Test" />

        </Grid>
        <Grid item xs={2} md={2}>
            <img src="http://placekitten.com/200/250" alt="Test" />
            <Typography >
                Test Test Test Test Test Test Test Test Test
            </Typography>
        </Grid>
        <Grid item xs={2} md={2}>
            <img src="http://placekitten.com/200/250" alt="Test" />

        </Grid>
    </Grid>
</Paper>

Answer 1

在主 Grid 标记的样式中添加 width: max-content;