<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使水平滚动功能的阵营

回答

相关问题