reactjs - Material ui 中的 导致水平滚动 - 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%',
  }}>