web-dev-qa-db-fra.com

<Grid> dans le matériau ui provoque un défilement horizontal- React

j'utilise le matériel ui version 1. installé par cette commande:

npm install -S material-ui@next

chaque fois que je veux l'utiliser, un défilement horizontal indésirable apparaît sur la page. par exemple, c'est un code simple:

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

je ne peux pas utiliser bootstrap ou toute autre option de disposition de grille car elles sont en conflit avec cette bibliothèque. cet exemple de code n'est pas un gros problème mais quand j'utilise dans d'autres parties d'un composant (par exemple dans le tiroir), le défilement horizontal apparaît, ce qui fait que le laid NavMenu et LoginPanel sont des composants auto-fabriqués et ils sont ok. les utiliser sans ne pas provoquer de défilement horizontal

reactjsgrid-layoutmaterial-ui
18
reza

J'ai eu le même problème. J'ai trouvé quelques solutions mais je ne me sens pas très élégant:

Désactiver l'espacement
Malheureusement, cela supprime tout le remplissage des éléments de grille enfant dans le conteneur:

<Grid container
  spacing={0}>

Correction manuelle du CSS
Voici ce que j'ai fini par faire:

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