2

I'm trying to use only Grid to create a SPA. I'm used to material-ui Grid and use it a lot, however in my new project I'm not sure what I'm doing wrong.

Right now this is the problem:

margin right

There is a margin on the right side and a horizontal scrollbar.

I know about the negative margin limitation, but if I apply a padding to the parent element (as the documentation says), then my Grid element loses the full width functionality:

using padding

The horizontal scrollbar goes away, but then I have a padding on my elements, and if I set a background color in one of these elements, it doesn't apply to the full width, because there is a padding.

Using the overflow-x: hidden adds a second vertical scrollbar, and it seems I have to scroll two times vertically to scroll the page.

The only solution is using Grid spacing={0}, but then I don't get the spacing between sections and Grid containers inside sections also can't use spacing.

And example of what I'm implementing is in this codesandbox: https://codesandbox.io/s/competent-volhard-e5yls?file=/src/App.js

My doubt is, what would be the best solution to have only a single page, and sections separating it. Ideally using one of the material-ui components.

Thanks a lot!

Otavio Bonder
  • 1,789
  • 4
  • 17
  • 35
  • Does this answer your question? [ in material ui causes horizontal scroll- React](https://stackoverflow.com/questions/45519275/grid-in-material-ui-causes-horizontal-scroll-react) – Olivier Tassinari Apr 15 '21 at 21:04

1 Answers1

1

Add this to the root style to remove the horizontal scrollbar and margins. Material UI adds additional elements to achieve its styling so it might be a good idea to use the developer tools to find out what may be obscuring your css rules. As in this case, the div below the root one needed its margin removed and to be full width.

root: {
  display: "flex",
  flexGrow: 1,
  "& > div": {
    width: "100vw",
    margin: "0"
  }
}

https://codesandbox.io/s/blue-dew-gpxy2?file=/src/App.js:279-318

Maybe read more about the MUI styles API and how to use nested styles and rules.

traderjosh
  • 321
  • 5
  • 16
  • The problem of this approach is that the Grid will have a padding, so it won't be full width. If I set the background color of one Grid item, it won't add the color to the whole row. Look at this sandbox: https://codesandbox.io/s/frosty-mccarthy-f8jln?file=/src/App.js – Otavio Bonder Jul 17 '20 at 00:28
  • It's the body, it has an 8px margin. Type `$0.style.margin = 0;` into the console and it'll remove it. I imported a stylesheet for it: https://codesandbox.io/s/elated-murdock-vzjxb?file=/src/index.js:61-82 – traderjosh Jul 17 '20 at 01:02