我想创建一个材质 ui 轮播，在同一行中显示 3 个项目。当缩小浏览器的宽度时，我希望这些项目仍然在一行中，并隐藏那些不适合的项目。
这是全屏时：
这就是我想要的：
但这是我得到的：
你对我做错了什么有任何想法吗？这是我的代码：
<Paper variant="outlined" className={classes.paper}>
<Grid
container
spacing={2}
className={classes.grid}
alignItems="center"
justify="center"
>
...
<Box display="flex" alignItems="center" className={classes.box}>
<Grid item xs="auto" className={classes.arrow}>
...Left Arrow...
</Grid>
<Grid item>
<Grid
container
spacing={2}
className={classes.grid}
alignItems="center"
justify="center"
>
<Grid item xs="auto">
<UserCard content={users[index]} />
</Grid>
<Hidden xsDown>
<Grid item xs="auto">
<UserCard content={users[index + 1]} />
</Grid>
</Hidden>
<Hidden smDown>
<Grid item xs="auto">
<UserCard content={users[index + 2]} />
</Grid>
</Hidden>
</Grid>
</Grid>
<Grid item xs="auto" className={classes.arrow}>
...Right Arrow...
</Grid>
</Box>
</Grid>
</Paper>
风格
const useStyles = makeStyles((theme) => ({
paper: {
display: "flex",
width: "auto",
},
grid: {
width: "auto",
},
arrow: {
padding: theme.spacing(3),
},
box: {
padding: theme.spacing(3),
},
}));