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

Question

我正在使用由此命令安装的材料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或任何其他网格布局选项,因为它们与此库冲突.这个代码示例并不是什么大问题但是当我在组件的其他部分使用时(例如在抽屉中),水平滚动出现使得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. 有时我们仍然可以spacing通过限制一个Container下的Grid来使用。

<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 页面中得到很好的记录。