在按钮之间添加填充

Question

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

              <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>

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

Answer 1

您可以在类型项组件之间使用间距。space。它只能用于类型容器组件。 (Grid API)

如果你想使用 material-ui 网格道具你应该把每个按钮放在单独的网格项目中。

它看起来像这样：

   <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>

在按钮之间添加填充

Add padding between buttons

reactjs

react-material