Estoy usando Material-UI versión 1. instalado por este comando:

 npm install -S material-ui@next

Cada vez que quiero usar , aparece un desplazamiento horizontal no deseado en la página.

Código:

 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 y otras opciones de grid layout están en conflicto con esta biblioteca. Cuando uso <Grid> en otras partes de un componente (por ejemplo, en el cajón), aparece el desplazamiento horizontal que hace que la interfaz de usuario sea fea NavMenu y LoginPanel son algunos componentes hechos a sí mismos y funcionan y usarlos sin causar desplazamiento horizontal.