reactjs - 如何在 Material-UI Grid 项目之间应用边距?
问题描述
我们如何在 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"
根据需要为您的项目添加或任何其他边距。
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);
推荐阅读
- c++ - 将对象实例转换为字节指针与类型双关语相同吗?
- android - 在 Visual Studio App Center 中,如何在问题页面上按内部版本号进行筛选?
- flutter - FAILURE:构建失败并出现异常。* 出了什么问题:无法确定任务 ':app:compileDebugJavaWithJavac' 的依赖关系
- python - 排队 Python 用户输入
- android - 未定义方法“MaterialPageRoute”
- javascript - 如何使用 React.js JavaScript 创建计数器
- json - 在 pyspakr 中修复格式错误的 json
- arrays - 在另一个函数中修改后指针数组不变
- python - 如何忽略我的开发项目以使用 pip 安装包
- flutter - 如何在flutter中创建常用参数类型widget函数