<Grid>材料UI使水平滾動功能的陣營

我使用的材料UI版本1.此命令安裝：<Grid>材料UI使水平滾動功能的陣營

npm install -S [email protected]

每次我想使用時間

，不需要的水平滾動出現在頁面上。例如這是一個簡單的代碼：

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

我不能使用引導程序或任何其他網格佈局選項，因爲它們與此庫衝突。這個代碼示例不是什麼大問題，但是當我在組件的其他部分（例如抽屜中）使用時，水平滾動會使UI很醜陋Navigator Navigator和LoginPanel是一些自制組件，它們都可以。使用它們不會導致水平滾動

來源

2017-08-05 reza

我有同樣的問題。我想通了一對夫婦的解決方案，但沒有感覺很優雅：

禁用間距
不幸的是這將刪除子網格項目在容器內的所有填充：

<Grid container 
    spacing={0}>

手動修復的CSS
這是我最終做的：

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

來源

2017-08-14 18:58:44 bmaupin

attribut e'gutter'不再可用。現在，他們使用'spacing'。 –

@JeremySullivan謝謝，更新！ – bmaupin

@bmaupin你認爲這是一個錯誤？我覺得只有網格項目應該有這種行爲。 – coolboyjules

<Grid>材料UI使水平滾動功能的陣營

回答

相關問題