gpt4 book ai didi

reactjs - 哪些 React Material-UI 组件为我的页面添加了间距(如 Bootstrap 中的行类)?

转载 作者:行者123 更新时间:2023-12-04 14:17:37 34 4
gpt4 key购买 nike

我使用 React 和 Material-UI 创建了一个项目用于 React。

来自 Bootstrap 背景,我注意到这些组件中没有一个组件周围有任何边距。

在 Bootstrap 中,我可以像这样添加间距:

<div class="row">
<div class="col-xs-12">
...
</div>
</div>

但我不知道使用什么组件来创建这样的间距。

我目前正在使用自定义类来创建某种间距,但感觉不正确。

App.tsx:

<Container maxWidth="lg" className="container-padding">
...
</Container>

App.css:

.container-padding {
padding: 30px;
}

例如,使用现有组件在这些元素之间添加间距:

Enter image description here

我愿意接受建议。

最佳答案

@material-ui中有一个类似于Bootstrap grid的grid布局组件。两者都基于 12 列网格。

下面的例子演示了它,

import Box from '@material-ui/core/Box';
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

return (
<Box m={4}>
<Grid container spacing={3}>
<Grid item xs={6}>
<Paper>xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=6</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
</Grid>
</Box>
<Box mx={3}>
Box 2 content
</Box>
<Box my={3}>
Box 3 content
</Box>
);

总结一下,

m - 所有边距

mx - 水平间距

我的 - 垂直间距

关于reactjs - 哪些 React Material-UI 组件为我的页面添加了间距(如 Bootstrap 中的行类)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58746670/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com