Как применить маржу между элементами сетки Material-UI?

Question

Как мы можем добавить поле (пустое пространство) между элементами Material-UI Grid?

Атрибут интервала контейнера добавляет только отступы для элементов.

import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    backgroundColor: "red"
  },
  root2: {
    backgroundColor: "green"
  }
});

function App() {
  const classes = useStyles();
  return (
    <Grid container spacing={2}>
      <Grid item xs={6} className={classes.root}>
        hi
      </Grid>
      <Grid item xs={6} className={classes.root2}>
        hi
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Измените атрибут xs, чтобы общее количество в этой строке было меньше 12.

Добавьте margin: "auto" или любое другое поле при вашем sh к вашим элементам.

import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    backgroundColor: "red",
    margin: "auto"
  },
  root2: {
    backgroundColor: "green",
    margin: "auto"
  }
});

function App() {
  const classes = useStyles();
  return (
    <Grid container spacing={2}>
      <Grid item xs={5} className={classes.root}>
        hi
      </Grid>
      <Grid item xs={5} className={classes.root2}>
        hi
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);