在 material ui 中，当我尝试在我的 Box 中添加 space 元素时，为什么 "spacing" 样式属性没有任何作用？

Question

我在我的 React 16.10 应用程序中使用了 materialUI。我在一个盒子里有两个按钮。

        <Box
          style={{
            marginTop: "3rem",
            marginLeft: "1rem",
            display: "flex",
            justifyContent: "center",
    spacing: 1,
          }}
        >
          <Button onClick={handleSave} variant="contained" color="primary">
            SAVE
          </Button>

          <Button
            onClick={toDetailsView}
            startIcon={<CancelIcon />}
            variant="contained"
            color="primary"
          >
          CANCEL
          </Button>
        </Box>

尽管我使用的是 "spacing: 1"，但这些按钮彼此紧挨着显示，因此无法区分一个按钮的结束位置和下一个按钮的开始位置...

如何添加样式，使按钮之间有一点 space？

Answer 1

寻找简单的修复方法？保证金：1rem；

在 material ui 中，当我尝试在我的 Box 中添加 space 元素时，为什么 "spacing" 样式属性没有任何作用？

In material ui, why isn't the "spacing" styling attribute doing anything when I try and space elements in my Box?

css

reactjs

material-ui

spacing

box