材质ui中的<Grid>导致水平滚动-React

Question

我正在使用Material-UI 版本 1。通过此命令安装：

npm install -S material-ui@next

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

代码：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';


/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';

const styleSheet = createStyleSheet('FullWidthGrid', theme => ({
  root: {
    flexGrow: 1,
    marginTop: 0,
  },
  paper: {
    padding: 16,
    textAlign: 'center',
    color: theme.palette.text.secondary,
    marginTop: "3rem"
  },
}));

function Login(props) {
    const classes = props.classes;
    return (
    <div className={classes.root}>
      <Grid container gutter={24} justify='center'>
        <Grid item xs={12} md={12} sm={12} lg={12}>
          <NavMenu/>
        </Grid>
        <Grid item xs={6} sm={6} md={6} lg={6}>
          <Paper className={classes.paper}>
            <LoginPanel />
          </Paper>
        </Grid>
      </Grid>
    </div>
    );
}

Login.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(Login);

Bootstrap 和其他 grid layout 选项与此库冲突。当我在组件的其他部分（例如抽屉中）使用<Grid> 时，出现水平滚动使 UI 丑陋 NavMenu 和LoginPanel 是一些自制组件，它们可以正常工作，不使用它们不会导致水平滚动。

Answer 1

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

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

<Grid container
  spacing={0}>

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

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

Answer 2

从评论中复制了简单的解决方案：

将xs={12} 添加到<Grid container>

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

感谢https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645

Answer 3

这是由spacing 引起的。有时我们仍然可以通过将 Grid 限制在 Container 下来使用spacing。

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

Answer 4

这里最好的解决方案是将网格包裹在一个具有最大宽度的容器中

<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>

这种方式溢出由容器处理，并且网格总是响应式地扩展到父级。这是迄今为止我找到的最优雅的解决方案。

提示：如果您使用此库创建仪表板之类的内容，则始终将内容区域的父级设置为<Container>，这样就不会出现溢出问题。试一试。经过一段时间的努力，对我来说效果很好，只是到处都找到了非优雅的解决方案。我必须说这应该在 react Material UI 页面中很好地记录。

Answer 5

这对我有用！

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

Answer 6

最新版本的 Material-UI (v5.0.0-alpha.30) 现已修复了根本问题。见https://github.com/mui-org/material-ui/issues/7466#issuecomment-820736245。

Answer 7

我也面临同样的问题。从 Grid 容器中删除间距并没有解决它。

解决方案：

设置 maxWidth 可以解决问题并分配所需的宽度，而不是在 Grid 容器的父级上设置。例如，如果我们在 Grid 容器的父级 Box 上设置 maxWidth，则 Grid 不会水平溢出。

我们不需要在 Grid 容器上设置 100% 的宽度，因为它的目的是默认适应 100% 的宽度。

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

Answer 8

我想出的主意是

<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>

Answer 9

这是具有负边距的网格的已知限制。 https://material-ui.com/components/grid/#limitations.

1. 不要使用网格间距并手动配置间距。

2. 向父级添加至少等于间距一半的填充，例如：

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

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

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

1. 设置溢出-x：隐藏

<Box style={{overflowX: "hidden"}}>
  <Grid ... spacing={3}>
    ..additional configuration
  </Grid>
</Box>

此解决方案的缺点是它（在我的测试中）会导致触摸屏尝试垂直滚动时出现问题...