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

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

Горизонтальная полоса прокрутки исчезает, но тогда у меня есть отступы для моих элементов, и если я устанавливаю цвет фона в одном из этих элементов, он не применяется к полной ширине, потому что есть отступ.
Использование overflow-x: Hidden добавляет вторую вертикальную полосу прокрутки, и кажется, что мне нужно прокрутить страницу два раза по вертикали, чтобы прокрутить страницу.
Единственное решение — использовать Grid spacing={0}, но тогда я не понимаю расстояния между разделами, а контейнеры Grid внутри разделов также не могут использоваться. интервал.
И пример того, что я реализую, находится в этом коде и блоке: https://codesandbox.io/s/competent-volh ... src/App.js
Я сомневаюсь, что было бы лучшим решением иметь только одну страницу и разделяющие ее разделы. В идеале использовать один из компонентов Material-UI.
Большое спасибо!
Мобильная версия