<Grid>は横スクロールのiは、このコマンドでインストール材料のUIバージョン1を使用してい

Question

リアクト原因となります。例えば、これはシンプルなコードです：

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

私はこのライブラリと矛盾しているので、ブートストラップやその他のグリッドレイアウトオプションは使用できません。このコード例は大したことではありませんが、コンポーネントの他の部分（例えば引き出しの部分）で使用すると水平スクロールが表示されてUIが醜くなります NavMenuとLoginPanelは自作のコンポーネントです。水平スクロールを起こさずにそれらを使用してください

Answer 1

私は同じ問題がありました。私は、カップルのソリューションを考え出したが、どちらも感触は非常にエレガント：

無効に間隔
残念ながら、これは、コンテナ内の子グリッド項目からすべてのパディング削除：

<Grid container 
    spacing={0}> 

を手動でCSSに
を修正しますこれは私がやったことです：