Reactjs 如何在物料UI网格项之间应用边距？

如何在物料UI网格项之间添加边距（空白）

容器的间距属性仅在项目上添加填充

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

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core”导入{Grid}”；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
根目录：{
背景颜色：“红色”
},
根2：{
背景颜色：“绿色”
}
});
函数App（）{
const classes=useStyles（）；
返回(
你好
你好
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

更改xs属性，使该行中的总数小于12，以便有一些空间

添加

页边距：“自动”

或您希望添加到项目中的任何其他页边距

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

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core”导入{Grid}”；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
根目录：{
背景颜色：“红色”，
页边空白：“自动”
},
根2：{
背景颜色：“绿色”，
页边空白：“自动”
}
});
函数App（）{
const classes=useStyles（）；
返回(
你好
你好
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；