<Grid> yatay scroll- ben bu komutla tarafından yüklenen malzeme ui sürümünü 1. kullanıyorum

Question

Tepki neden olur. bu kütüphane ile çatışma içinde olduğumuz için ben ön yükleme alanı veya başka bir ızgara düzeni seçeneklerini kullanamazsınız

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

: Örneğin bu basit bir koddur. Bu kod örneği büyük bir anlaşma değildir, ancak bir bileşenin diğer bölümlerinde (örneğin çekmecede) kullandığımda, yatay kaydırma görünürde, kullanıcı arabirimi NavMenu ve LoginPanel, kendiliğinden oluşturulmuş bazı bileşenlerdir ve tamamdır. bunları kullanmadan yatay kaydırma yapmayın.

Answer 1

Aynı sorunu yaşadım. Bir kaç çözümleri anladım ama çok şık ne hissediyorum:

<Grid container 
    spacing={0}> 

Elle CSS
düzeltmek:

devre dışı bırak aralık
Maalesef bu kapsayıcı içindeki çocuk ızgara öğelerinden tüm dolguyu kaldırır Yaptığım şey şudur:

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