Переопределение точки останова системы сетки? - PullRequest
Новая
       75

Переопределение точки останова системы сетки?

0 голосов
/ 17 июня 2020

Мне нужна помощь. Я использую систему сетки material-ui, и моя полная страница реагирует как шарм, но мне нужно при переполнении компонентов сетки X с фиксированным заголовком, поэтому только контейнер Grid должен быть горизонтальной полосой прокрутки, но я пробовал много вещей, но ничего не работает . У меня есть эта система. Так что я бы хотел горизонтальную прокрутку, когда я сгенерировал больше элементов сетки.

Это мой фрагмент кода для этой части. 

<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}

Было бы здорово, если бы у кого-нибудь появилась идея решения этой проблемы.

1 Ответ

0 голосов
/ 17 июня 2020

Вам необходимо использовать wrap={"nowrap"} prop в компоненте контейнера Grid, а также необходимо предоставить overflowX="auto". Что-то вроде этого 

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

Я создал этот проект песочницы кода с точными реализациями

...