Question

我正在使用Material UI并尝试创建一个嵌套的网格页面，

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: "center",
    backgroundColor: "blue"
  },
  grid: {
    backgroundColor: "yellow",
    padding: 10,
    margin: 10,
    height: 100
  }
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={24}>
        <Grid container item xs={9}>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=12</Paper>
          </Grid>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=6</Paper>
          </Grid>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CenteredGrid);

下面是我从代码中得到的。我注意到，当右侧组件（内部带有单词test）变长时，左侧底部组件将以位于其所占空间中间的方式下降，但是我需要的是将这两个组件左侧网格彼此之间没有间隙。拜托，你能告诉编辑： 1）为什么会这样？ 2）还指出，如果我从内部网格中删除container，间隙消失了，为什么会引起间隙？ 3）如果您有其他解决方案，请告诉我确切的原因，以及我可以去那里学习文档的文档（请提供确切的页面，而不是整个网站）

Answer 1

您只需将display: table的样式属性添加到外部Grid容器中，并在display: inline-flex内部容器上添加Grid：

工作示例：https://codesandbox.io/s/1rwnr1y433

Grid.js

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: "center",
    backgroundColor: "blue"
  },
  grid: {
    backgroundColor: "yellow",
    padding: 10,
    margin: 10,
    height: 100
  }
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Grid style={{ display: "table" }} container spacing={24}>
        <Grid style={{ display: "inline-flex" }} container item xs={9}>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=12</Paper>
          </Grid>
          <Grid className={classes.grid} item xs={12}>
            <Paper className={classes.paper}>xs=12</Paper>
          </Grid>
        </Grid>
        <Grid style={{ display: "inline-flex" }} item xs={3}>
          <Paper className={classes.paper}>
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
            teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest teeeeeeeeeeeeeeeeeest
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CenteredGrid);

网格之间的多余（不需要的）空间

1 个答案: