<Grid> trong ui liệu gây scroll- ngang Phản ứng

Question

Tôi đang sử dụng phiên bản tài liệu ui 1. cài đặt bằng lệnh này:

npm install -S material-ui@next 

mỗi khi tôi muốn sử dụng, một cuộn ngang không mong muốn xuất hiện trong trang. ví dụ: đây là một mã đơn giản:

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

Tôi không thể dùng bootstrap hoặc bất kỳ tùy chọn bố cục lưới nào khác vì chúng xung đột với thư viện này. Ví dụ mã này không phải là vấn đề lớn nhưng khi tôi sử dụng trong các phần khác của thành phần (ví dụ trong ngăn kéo), cuộn ngang xuất hiện khiến cho ui xấu xí NavMenu và LoginPanel là một số thành phần tự tạo và chúng ổn. sử dụng chúng mà không gây ra cuộn ngang

Answer 1

Tôi gặp vấn đề tương tự. Tôi đã tìm ra một vài giải pháp nhưng không phải cảm giác rất thanh lịch:

Disable khoảng cách
Đáng tiếc là điều này loại bỏ tất cả các lớp đệm từ mục lưới trẻ trong container:

<Grid container 
    spacing={0}> 

Thủ công khắc phục CSS
Đây là những gì tôi đã làm cuối cùng:

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