我们如何在 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);
最佳答案
更改 xs 属性,使该行中的总数小于 12 以留出一些空间。
添加 margin: "auto"
或您希望的任何其他 margin 。
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);
关于reactjs - 如何在 Material-UI Grid 项之间应用边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59903753/