<Grid> in ui material causes horizontal scrolling - React

Question

I am using ui material version 1. installed by this command:

npm install -S material-ui@next 

every time I want to use, an unwanted horizontal scroll appears on the page. for example, this is simple code:

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

I cannot use bootstrap or any other grid layout options because they conflict with this library. this code example doesn't really matter, but when I use it in other parts of the component (for example, in a box), horizontal scrolling appears, which makes ui ugly NavMenu and LoginPanel - these are some home-made components, and they are fine. using them without causing horizontal scrolling

Answer 1

I had the same problem. I understood a couple of solutions, but I don’t feel very elegant:

Disable Interval
Unfortunately, this removes all padding from the children of the mesh in the container:

 <Grid container spacing={0}> 

CSS manual fix
This is what I ended up with:

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