Как использовать Material-UI Grid для SPA (проблема с отрицательным запасом)CSS

Разбираемся в CSS
Ответить
Гость
 Как использовать Material-UI Grid для SPA (проблема с отрицательным запасом)

Сообщение Гость »


Я пытаюсь использовать только Grid для создания SPA. Я привык к Material-UI Grid и часто использую его, однако в своем новом проекте я не уверен, что делаю не так.

Проблема сейчас в следующем:


Изображение


Справа есть поле и горизонтальная полоса прокрутки.

Я знаю об ограничении отрицательного поля, но если я применю отступ к родительскому элементу (как сказано в документации), то мой элемент Grid потеряет функциональность полной ширины:


Изображение


Горизонтальная полоса прокрутки исчезает, но тогда у меня есть отступы для моих элементов, и если я устанавливаю цвет фона в одном из этих элементов, он не применяется к полной ширине, потому что есть отступ.

Использование overflow-x: Hidden добавляет вторую вертикальную полосу прокрутки, и кажется, что мне нужно прокрутить страницу два раза по вертикали, чтобы прокрутить страницу.

Единственное решение — использовать Grid spacing={0}, но тогда я не понимаю расстояния между разделами, а контейнеры Grid внутри разделов также не могут использоваться. интервал.

И пример того, что я реализую, находится в этом коде и блоке: https://codesandbox.io/s/competent-volh ... src/App.js

Я сомневаюсь, что было бы лучшим решением иметь только одну страницу и разделяющие ее разделы. В идеале использовать один из компонентов Material-UI.

Большое спасибо!
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»