网格系统断点覆盖？

Question

我需要一些帮助。我使用material-ui Grid系统，我的整个页面像一个魅力一样响应，但我需要在网格组件overflowX和固定标题，所以只有Grid容器应该是一个水平滚动条，但我尝试了很多东西但没有任何效果. I have this gird system. 所以当我生成更多网格项时，我想水平滚动。

这是我这部分的代码-sn-p。

<DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable" direction={windowInnerWidth > 1280 ? 'horizontal' : 'vertical'} type="droppableItem">
                {(provided, snapshot) => (
                    <div>
                        {windowInnerWidth > 1280 ? (
                            <Grid container spacing={6} ref={provided.innerRef} {...provided.droppableProps} >
                                {mergedData &&
                                    mergedData.map((section, index) => (
                                        <Grid item xs={12} xl="auto" lg="auto" key={section.uid}  >
                                            <Draggable
                                                key={section.id}
                                                draggableId={section.id}
                                                index={index}
                                            // isDragDisabled={false}
                                            >
                                                {(provided, snapshot) => (
                                                    <Card ref={provided.innerRef} {...provided.draggableProps} style={provided.draggableProps.style}>
                                                        <CardContent key={section.uid} index={props.index}>
                                                            <MyWorkoutSectionListItem
                                                                type={section.id} // type
                                                                key={section.id}
                                                                section={section}
                                                                provided={provided}
                                                                index={index}
                                                                workouts={section.workouts.filter((workout) => {
                                                                    return workout.title.toLowerCase().includes(props.search.toLowerCase());
                                                                })} // subItems
                                                                workoutSections={props.workoutSections}
                                                                sectionName={props.sectionName}
                                                                defaultSectionId={defaultSectionId}
                                                                deleteSection={props.deleteSection}
                                                                handleWorkoutChange={props.handleWorkoutChange}
                                                                handleSectionChange={props.handleSectionChange}
                                                                changeMergeData={props.changeMergeData}
                                                            />

                                                            {provided.placeholder}
                                                        </CardContent>
                                                    </Card>
                                                )}
                                            </Draggable>
                                        </Grid>
                                    ))}
                                {provided.placeholder}

如果有人对这个问题有想法，那就太好了。

Answer 1

您需要在容器 Grid 组件上使用 wrap={"nowrap"} 属性，还需要提供 overflowX="auto"。 像这样的

....
<Grid container spacing={2} wrap={"nowrap"} style={{ overflowX: "auto" }}>
  <Grid item>Hello</Grid>
  <Grid item>Hello</Grid>
</Grid>
...

我已经创建了 this 代码沙盒项目，并带有确切的实现