Реакция: как заставить работать интервал сетки Material UI?

Question

Я использую сетку пользовательского интерфейса материала (https://material-ui.com/api/grid) для своего макета, однако, хотя столбцы и строки работают нормально, атрибут spacing не работает.

Я импортировал Grid следующим образом: import Grid from '@material-ui/core/Grid'

  <Grid container spacing={10}>
    <Grid item xs={12} sm={6}>
      CONTENT
    </Grid>
    <Grid item xs={12} sm={6}>
      CONTENT
    </Grid>
  </Grid>

Но не отображается заполнение.

Кто-нибудь знает, как включить интервал в сетку?

Answer 1

Интервал сетки применяется как заполнение, когда вы используете xs or sm, там заполнение будет перекрывать верхнее, поэтому вы получите верхнее нижнее заполнение

Answer 2

Просто содержание внутри <Grid> не сработает, но если вы поместите его в <div> или <Paper>, вы получите то, что вам нужно ...

релевантно js:

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  grid: {
    textAlign: "center",
    color: theme.palette.text.secondary
  },
  span: {
    border: "1px solid pink",
    backgroundColor: "lightpink`"
  },
  span2: {
    border: "1px solid green",
    backgroundColor: "lightgreen"
  },
  span3: {
    border: "1px solid blue",
    backgroundColor: "lightblue"
  },
}));

const App = () => {
  var classes = useStyles();

  return (
    <div className={classes.root}>
      <Hello name="React" />
      <p>Start editing to see some magic happen :)</p>
      <br />
      <Grid container spacing={10}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span}>CONTENT</div>
        </Grid>
      </Grid>
      <hr />
      <Grid container spacing={8}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span2}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span2}>CONTENT</div>
        </Grid>
      </Grid>
      <hr />
      <Grid container spacing={6}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span3}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span3}>CONTENT</div>
        </Grid>
      </Grid>
    </div>
  );
};

пример стек * здесь