Reactjs <；网格>；在物料界面中导致水平滚动-反应

我正在使用

materialui

version 1。通过此命令安装：

npm install -S material-ui@next

每次我想使用时，页面中都会出现一个不需要的水平滚动条

代码：

从“React”导入React；
从“道具类型”导入道具类型；
从“材质ui/样式”导入{withStyles，createStyleSheet}；
从“物料界面/纸张”导入纸张；
从“物料界面/网格”导入网格；
/*项目导入*/
从“./Page Parts/NavMenu”导入导航菜单；
从“/Login Parts/LoginPanel”导入LoginPanel；
const styleSheet=createStyleSheet（'FullWidthGrid'，theme=>({
根目录：{
flexGrow:1，
玛金托普：0，
},
论文：{
填充：16，
textAlign:'中心'，
颜色：theme.palete.text.secondary，
玛金托普：“3rem”
},
}));
功能登录（道具）{
常量类=道具类；
返回(
);
}
Login.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式表）（登录）；

引导

和其他

网格布局

选项与此库冲突。当我在组件的其他部分（例如在抽屉中）使用

时，出现水平滚动会使UI难看

---

NavMenu

和

LoginPanel

是一些自制的组件，它们工作和使用时不会导致水平滚动。

我也有同样的问题。我想出了两个解决方案，但都不觉得很优雅：

禁用间距
不幸的是，这会删除容器中子网格项的所有填充：

<Grid container
  spacing={0}>

手动修复CSS
这就是我最后做的：

<Grid container
  style={{
    margin: 0,
    width: '100%',
  }}>

---

我也面临同样的问题。从网格容器中删除间距无法解决此问题

解决方案：

设置maxWidth可以修复问题并指定所需的宽度，而不是在网格容器的父容器上设置。例如，如果我们在作为网格容器父对象的框上设置maxWidth，那么网格不会水平溢出

我们不需要在网格容器上设置100%的宽度，因为它的目的是在默认情况下适应100%的宽度

 <Box style={{ maxWidth: 600}}>
     <Grid container spacing={3}>
     ...
     </Grid>
 </Box>

...

这是由

间距造成的。有时我们仍然可以通过限制容器下的网格来使用
间距

<Container maxWidth={false}>
  <Grid container spacing={6}>
    Omit
  </Grid>
</Container>


省略
这对我很有效

<Box style={{overflow: 'auto'}}>
<Grid>...</Grid>
</Box>



...
我的想法是

<Grid container>
 <Grid item xs={12} md={4}>
    <div style={{width:"97%",margin:"0 auto"}}>
     .....Your content
     </div>
  </Grid>
  <Grid item xs={12} md={4}>
    <div style={{width:"97%",margin:"0 auto"}}>
     .....Your content
     </div>
  </Grid>
  <Grid item xs={12} md={4}>
    <div style={{width:"97%",margin:"0 auto"}}>
     .....Your content
     </div>
  </Grid>
 </Grid>


……您的内容
……您的内容
……您的内容
最好的解决方案是将网格包装在一个最大宽度的容器中

<Container>
    <Grid container spacing={2}>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
   </Grid>
</Container>



通过这种方式，溢出由容器处理，网格总是响应地扩展到父网格中。到目前为止，这是我找到的最优雅的解决方案

提示：如果您使用此库创建类似于仪表板的内容，则始终将内容区域的父级设置为
，这样就不会出现溢出问题。试试看。在挣扎了一段时间后，我的工作很好，只是到处都找不到优雅的解决方案。我必须说，这应该记录在react Material UI页面中。
从评论中复制了easy解决方案：

将
xs={12}
添加到



要归功于
这是一个已知的具有负边际的网格限制

不要使用栅格间距并手动配置间距


向父对象添加至少等于间距一半的填充，例如：

12=3（间距）*8（主题间距像素）/2


{/*或style={{padding:12}}*/}
…附加配置

这种解决方案的缺点是它改变了组件的外观

设置溢出-x：隐藏

…附加配置

此解决方案的缺点是（在我的测试中）会导致触摸屏尝试垂直滚动时出现问题…
最新版本的Material UI（v5.0.0-alpha.30）中已修复了根本问题。请参阅。
属性
边沟
不再可用。现在，他们使用
间距
@bmaupin你认为这是一个bug吗？我觉得只有网格项才应该有这种行为。@coolboyjules它看起来确实像一个bug。在我自己的应用程序中，我最终放弃了对Grid for vanilla flexbox的大部分使用，因为发生了太多的魔法，否则我可能会在github上产生问题。@b事实上，回购协议上存在问题。看见我最终同意你的解决方案，但答案中的第一个解决方案也不错。为memeh解决方案解决了这个问题。。。。当今的发展要求最具响应性的设计，网格的用途是。。。静态大小没有那么大帮助
<Container>
    <Grid container spacing={2}>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
   </Grid>
</Container>

<Grid container spacing={3} xs={12}>

<Box p={12}> {/* or style={{ padding: 12 }} */}
  <Grid ... spacing={3}>
    ..additional configuration
  </Grid>
</Box>