材质ui中的<Grid>导致水平滚动-React
Posted
技术标签:
【中文标题】材质ui中的<Grid>导致水平滚动-React【英文标题】：<Grid> in material ui causes horizontal scroll- React 【发布时间】：2018-01-13 03:05:10 【问题描述】：我正在使用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 是一些自制组件，它们可以正常工作，不使用它们不会导致水平滚动。
【问题讨论】：
【参考方案1】：我有同样的问题。我想出了几个解决方案，但都不觉得很优雅：
禁用间距 不幸的是，这会删除容器内子网格项的所有填充：
<Grid container
spacing=0>
手动修复 CSS 这就是我最终要做的：
<Grid container
style=
margin: 0,
width: '100%',
>
【讨论】：
属性gutter 不再可用。现在，他们使用spacing。
@bmaupin 你认为这是一个错误吗？我觉得只有 Grid 项目应该有这种行为。
@coolboyjules 这看起来确实像一个错误。在我自己的应用程序中，我最终放弃了对香草 flexbox 的大部分使用网格，因为发生了太多的魔法，否则我可能会在 github 上创建一个问题。
@bmaupin 实际上在 repo 上有一个问题。见here。我最终选择了您的解决方案，但该答案中的第一个解决方案也不错。
This comment 帮我解决了【参考方案2】：
从评论中复制了简单的解决方案：
将xs=12 添加到<Grid container>
<Grid container spacing=3 xs=12>
感谢https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645
【讨论】：
【参考方案3】：这是由spacing 引起的。有时我们仍然可以通过将 Grid 限制在 Container 下来使用spacing。
<Container maxWidth=false>
<Grid container spacing=6>
Omit
</Grid>
</Container>
【讨论】：
【参考方案4】：这里最好的解决方案是将网格包裹在一个具有最大宽度的容器中
<Container>
<Grid container spacing=2>
<Grid item sm=6></Grid>
<Grid item sm=6></Grid>
<Grid item sm=6></Grid>
<Grid item sm=6></Grid>
</Grid>
</Container>
这种方式溢出由容器处理，并且网格总是响应式地扩展到父级。这是迄今为止我找到的最优雅的解决方案。
提示：如果您使用此库创建仪表板之类的内容，则始终将内容区域的父级设置为<Container>，这样就不会出现溢出问题。试一试。经过一段时间的努力，对我来说效果很好，只是到处都找到了非优雅的解决方案。我必须说这应该在 react Material UI 页面中很好地记录。
【讨论】：
【参考方案5】：这对我有用！
<Box style=overflow: 'auto'>
<Grid>...</Grid>
</Box>
【讨论】：
【参考方案6】：最新版本的 Material-UI (v5.0.0-alpha.30) 现已修复了根本问题。见https://github.com/mui-org/material-ui/issues/7466#issuecomment-820736245。
【讨论】：
【参考方案7】：我也面临同样的问题。从 Grid 容器中删除间距并没有解决它。
解决方案：
设置 maxWidth 可以解决问题并分配所需的宽度，而不是在 Grid 容器的父级上设置。例如，如果我们在 Grid 容器的父级 Box 上设置 maxWidth，则 Grid 不会水平溢出。
我们不需要在 Grid 容器上设置 100% 的宽度，因为它的目的是默认适应 100% 的宽度。
<Box style= maxWidth: 600>
<Grid container spacing=3>
...
</Grid>
</Box>
【讨论】：
meh 解决方案....今天的开发最多需要响应式设计，而网格的用途...静态大小不是那么有用【参考方案8】：我想出的主意是
<Grid container>
<Grid item xs=12 md=4>
<div style=width:"97%",margin:"0 auto">
.....Your content
</div>
</Grid>
<Grid item xs=12 md=4>
<div style=width:"97%",margin:"0 auto">
.....Your content
</div>
</Grid>
<Grid item xs=12 md=4>
<div style=width:"97%",margin:"0 auto">
.....Your content
</div>
</Grid>
</Grid>
【讨论】：
【参考方案9】：这是具有负边距的网格的已知限制。 https://material-ui.com/components/grid/#limitations.
不要使用网格间距并手动配置间距。
向父级添加至少等于间距一半的填充，例如：
12 = 3（间距）* 8（主题间距像素）/2
<Box p=12> /* or style= padding: 12 */
<Grid ... spacing=3>
..additional configuration
</Grid>
</Box>
这个解决方案的缺点是它改变了组件的外观。
-
设置溢出-x：隐藏
<Box style=overflowX: "hidden">
<Grid ... spacing=3>
..additional configuration
</Grid>
</Box>
此解决方案的缺点是它（在我的测试中）会导致触摸屏尝试垂直滚动时出现问题...
【讨论】：
以上是关于材质ui中的<Grid>导致水平滚动-React的主要内容，如果未能解决你的问题，请参考以下文章