дополнительное (нежелательное) пространство между сетками - PullRequest
Новая
       10

дополнительное (нежелательное) пространство между сетками

0 голосов
/ 09 октября 2018

Я использую 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) пожалуйста, если у вас есть какое-либо другое решение, скажите мне точно, почему они работают, и документ (точную страницу, а не весь веб-сайт, пожалуйста), где я могу пойти и изучить их

enter image description here

1 Ответ

0 голосов
/ 09 октября 2018

Вам просто нужно добавить атрибут стиля 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);

enter image description here

...