哪些React Material-UI组件在我的页面上增加了间距（如Bootstrap中的行类）？

Question

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

从Bootstrap的背景来看，我注意到这些组件中没有一个在其组件周围留有空白。

在Bootstrap中，我可以这样添加间距：

()

但是我不知道要使用什么组件来产生这种间距。

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

App.tsx：

{}

App.css：

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

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

我愿意征求意见。

Answer 1

@material-ui中有一个网格布局组件，类似于Bootstrap网格。两者均基于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-水平间距

我-垂直间距

Answer 2

我使用了 Heydon Pickering 的“Lobotomized Owl”选择器：* + *。

我创建了一个“容器”组件Vertical.js：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Box } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  vertical: {
    '& > *+*': {
      marginTop: '1.5rem',
    },
  },
}));

const Vertical = ({ children }) => {
  const classes = useStyles();
  return <Box className={classes.vertical}>{children}</Box>;
};

export default Vertical;

然后在任何其他组件中使用它，例如Example.js：

import React from 'react';
import Vertical from './Vertical';

const Example = () => {
  return (
    <Vertical>
      <Component/>
      <Component />
      <Another />
      <AnotherComponent />
    </Vertical>
  );
};

export default Example;