材料界面中的<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是一些自制的组件，它们可以工作，而不使用它们不会导致水平滚动。
Stack Overflow用户
发布于 2020-06-02 17:20:44
我也面临着同样的问题。从Grid容器中删除间隔并没有解决这个问题。
解决方案：
设置maxWidth不是在网格容器的父容器上设置with，而是修复问题并分配所需的宽度。例如，如果我们在作为网格容器的父容器的Box上设置maxWidth，那么网格不会水平溢出。
我们不需要在Grid容器上设置宽度100%，因为它的目的是在默认情况下适应100%的宽度。
<Box style={{ maxWidth: 600}}>
<Grid container spacing={3}>
...
</Grid>
</Box>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45519275
复制相关文章
相似问题
腾讯云开发者
