在按钮之间添加填充答案

【问题标题】：Add padding between buttons在按钮之间添加填充
【发布时间】：2021-10-22 15:52:02
【问题描述】：

我对如何在这些按钮之间添加空间感兴趣：

              <Box pb={2}>
                <Grid
                    container
                    direction="row"
                    justifyContent="space-between"
                    alignItems="baseline"
                >
                    <Grid item>
                        <Typography variant="h4">
                            Tickets
                        </Typography>
                    </Grid>
                    <Grid item>
                        <Box component="span">
                            <Button sx={{ p: 2 }}
                                variant="contained"
                                color="primary"
                                size="small"
                                startIcon={<SaveIcon />}
                            >
                                Open Ticket
                            </Button>
                            <Button sx={{ p: 2 }}
                                variant="contained"
                                color="primary"
                                size="small"
                                startIcon={<SaveIcon />}
                            >
                                Export
                            </Button>
                        </Box>
                    </Grid>
                </Grid>
            </Box>

我尝试添加：

<Box bgcolor="red" display="inline-block">
  <Button sx={{ m: 2 }} variant="contained">
    margin
  </Button>
</Box>

但看起来我需要在未应用空间之间的主容器中添加一些配置。你知道在按钮之间添加空间的正确方法是什么吗？

【问题讨论】：

标签： reactjs react-material

【解决方案1】：

您可以使用spacing。类型项组件之间的空间。它只能用于类型容器组件。 (Grid API)

如果你想使用 material-ui Grid 道具，你应该将每个按钮放在单独的 Grid 项中。

它看起来像这样：

   <Box pb={2}>
            <Grid
                container
                spacing={2}
                direction="row"
                justifyContent="space-between"
                alignItems="baseline"
            >
                <Grid item>
                    <Typography variant="h4">
                        Tickets
                    </Typography>
                </Grid>

                <Grid item>
                    <Box component="span">
                        <Button sx={{ p: 2 }}
                            variant="contained"
                            color="primary"
                            size="small"
                            startIcon={<SaveIcon />}
                        >
                            Open Ticket
                        </Button>
                    </Box>
                </Grid>

                <Grid item>
                    <Box component="span">
                        <Button sx={{ p: 2 }}
                            variant="contained"
                            color="primary"
                            size="small"
                            startIcon={<SaveIcon />}
                        >
                            Export
                        </Button>
                    </Box>
                </Grid>

            </Grid>
        </Box>

【讨论】：