如何在元素（5px）之间创建一个 space？

Question

我有两个网格，我想在元素之间创建间距，space 水平方向必须为 5px，我使用了间距={5} 但没有用

<Grid container direction={'row'} spacing={5}>
    <Grid item xs={12}>
        <FormControl
            className={classes.formControl}
            fullWidth
        >
            <InputLabel id="issue-label">Issue</InputLabel>
            <Select
                className={classes.select}
                id="issue"
                onChange={handleIssue}
            >
                <MenuItem value="" disabled>
                   Please select
                </MenuItem>
                ))}
            </Select>
        </FormControl>
    </Grid>
    <Grid item xs={12}>
        <TextField
            fullWidth={true}
            multiline
        />
    </Grid>
</Grid>

Answer 1

根据Grid component documentation page，spacing属性中的数字乘以8px。所以spacing={5}表示两个item之间的差距其实是40px。

将 spacing 道具替换为 style={{ gap: 5 }}。这应该将项目之间的 flexbox 间隙设置为 5px。

Answer 2

您也可以使用

.grid-container {
  grid-gap: 5px;
}

这是参考资料

https://www.w3schools.com/cssref/pr_grid-gap.asp

如何在元素（5px）之间创建一个 space？

How create a space between elements (5px)?

grid

reactjs

material-ui