How to use Material-UI Grid for SPA (negative margin problem)

问题

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:

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:

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!

回答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.

来源：https://stackoverflow.com/questions/62942858/how-to-use-material-ui-grid-for-spa-negative-margin-problem

标签

javascript

css

reactjs

material-ui