材料界面中的<Grid>引起水平滚动反应
材料界面中的<Grid>引起水平滚动反应
提问于 2017-08-05 07:09:32
我使用的是由以下命令安装的Material-UI版本1：
npm install -S material-ui@next每次我想使用时，页面中都会出现一个不需要的水平滚动。
代码：
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和其他grid layout选项与此库发生冲突。当我在组件的其他部分中使用<Grid>时(例如在抽屉中)，水平滚动的出现使UI变得丑陋，NavMenu和LoginPanel是一些自制的组件，它们可以工作，而不使用它们不会导致水平滚动。
回答 9
Stack Overflow用户
回答已采纳
发布于 2017-08-14 18:58:44
我也有过同样的问题。我想出了几个解决方案，但都不觉得很优雅：
禁用间隔
不幸的是，这将从容器中的子网格项中删除所有填充：
<Grid container
spacing={0}>手动修复CSS
这就是我最后所做的：
<Grid container
style={{
margin: 0,
width: '100%',
}}>Stack Overflow用户
发布于 2020-12-23 07:26:10
从评论中复制简单的解决方案：
将xs={12}添加到<Grid container>
<Grid container spacing={3} xs={12}>贷给https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645
Stack Overflow用户
发布于 2020-08-11 02:15:09
这是由spacing引起的。有时，我们仍然可以通过限制容器下的网格来使用spacing。
<Container maxWidth={false}>
<Grid container spacing={6}>
Omit
</Grid>
</Container>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45519275
复制相关文章
相似问题
腾讯云开发者
