Reactjs 哪些UI组件为我的页面添加了间距（如引导中的行类）？

我已经使用React和for React创建了一个项目

我注意到，这些组件在它们的组件周围都没有任何空白

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

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

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

---

我愿意听取建议。

在

@material ui

中有一个类似于引导网格的网格布局组件。两者都基于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>
);

从'@material ui/core/Box'导入框；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
返回(
xs=6
xs=6
xs=3
xs=3
xs=3
xs=3
框2内容
框3内容
);

总而言之

m-所有边边距

mx-水平间距

my-垂直间距

我使用了Heydon Pickering的“”选择器：

*+*

我创建了一个“容器”组件

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;

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

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

export default Example;

---

这将是完美的，但我的元素上方的间距不起作用。请参见更新示例使用带有m/mx/my的Box元素来实现间距。已更新代码，请检查

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;

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

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

export default Example;