代码之家 › 专栏 › 技术社区 › reza

材料界面中的<网格>导致水平滚动-反应

material-ui grid-layout reactjs

reza · 技术社区 · 9 年前

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 回复 | 直到 5 年前

bmaupin 9 年前

我也有同样的问题。我想出了几个解决方案,但都不觉得很优雅:

禁用间距
不幸的是,这会删除容器中子网格项的所有填充:

<Grid container
  spacing={0}>

这就是我最后要做的:

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

derek 5 年前

从评论中复制了easy解决方案:

补充 xs={12} 到 <Grid container>

<Grid container spacing={3} xs={12}>

贷记至 https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645

Lane 6 年前

这是由于 spacing 间距 通过限制容器下的网格。

<Container maxWidth={false}>
  <Grid container spacing={6}>
    Omit
  </Grid>
</Container>

Somangshu Goswami 5 年前

这里最好的解决方案是将网格包装在最大宽度的容器中

<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> ,这样就不会出现溢出问题。试试看。在苦苦挣扎了一段时间后,我的工作很好,只找到了不优雅的解决方案。我必须说,这应该记录在反应材料界面页面。

Aditya Patnaik 6 年前

这对我有用!

<Box style={{overflow: 'auto'}}>
<Grid>...</Grid>
</Box>

Olivier Tassinari NearHuscarl 5 年前

最新版本的Material UI(v5.0.0-alpha.30)现已修复了根本问题。看见 https://github.com/mui-org/material-ui/issues/7466#issuecomment-820736245

Rusty 6 年前

我也面临着同样的问题。从网格容器中删除间距并没有解决这个问题。

解决方案:

设置maxWidth并没有在网格容器的父容器上设置,而是解决了问题并指定了所需的宽度。例如,如果我们在网格容器的父对象框上设置maxWidth,那么网格不会水平溢出。

 <Box style={{ maxWidth: 600}}>
     <Grid container spacing={3}>
     ...
     </Grid>
 </Box>

Abdul Kàbéèr 5 年前

我的想法是

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

Nicholas_Jones 5 年前

这是具有负边距的网格的已知限制。 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>

这种解决方案的缺点是它改变了组件的外观。

<Box style={{overflowX: "hidden"}}>
  <Grid ... spacing={3}>
    ..additional configuration
  </Grid>
</Box>

这个解决方案的缺点是(在我的测试中)会导致触摸屏垂直滚动的问题。。。