如何将Material-UI Grid用于SPA(负边距问题) [英] How to use Material-UI Grid for SPA (negative margin problem)

问题描述

我正在尝试仅使用 Grid 创建SPA.我已经习惯了Material-ui Grid 并经常使用它，但是在我的新项目中，我不确定自己做错了什么.

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.

现在这是问题所在

在右侧有一个空白，并有一个水平滚动条.

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

我知道负边距限制，但是如果我对父元素应用填充(如文档所述)，那么我的 Grid 元素将失去全宽度功能:

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.

使用 overflow-x:隐藏添加了第二个垂直滚动条，看来我必须垂直滚动两次才能滚动页面.

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

唯一的解决方案是使用 Grid interval = {0} ，但是我没有得到节之间的间距，并且节内的 Grid 容器也不能使用 spacing .

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

我的疑问是，只有一个页面和分隔页面的最佳解决方案是什么.理想情况下，使用material-ui组件之一.

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.

非常感谢！

推荐答案

将其添加到根样式中以删除水平滚动条和边距.Material UI添加了其他元素来实现其样式，因此使用开发人员工具找出可能使您的CSS规则变得晦涩的想法可能是一个好主意.在这种情况下，根目录下的div需要删除其边距并变为全宽.

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

也许阅读有关MUI样式API以及如何使用嵌套样式和规则的更多信息.

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

这篇关于如何将Material-UI Grid用于SPA(负边距问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！