Material ui 如何在材质界面中的两个按钮之间留出空间？

我正在尝试将我的更新和删除按钮移到同一行。它来了。但是这两个按钮之间没有空格

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Update'}
              </Button>

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Delete'}
              </Button>   
            </div>

{'Update'}
{'Delete'}

---

我怎样才能解决这个问题？

你好，Malsha Madushani

如果要在按钮之间创建空格，可以为一个按钮指定边距属性

请参见此示例：

/*----HTML------------*/
/*-------------CSS--------*/
#钮扣{
背景色：红色；
}
#更新bTN{
右边距：100px；
}
{'Update'}
{'Delete'}

您需要为第一个按钮赋予样式属性右边距：（xx）px

[按钮][按钮]

将在两个按钮之间创建一个10px的空间

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Update'}
              </Button>

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Delete'}
              </Button>   
            </div>

结果:

[按钮]---空格（在px中）---[按钮]

您需要使用带有

display=“flex”

和

justifyContent=“space-between”

的材质UI组件。这在水平方向上增加了元素之间的空间

<Box display="flex" justifyContent="space-between">
  <Button className={clsx(classes.button)}
            type="submit"
            variant="contained">
            {'Update'}
          </Button>

          <Button className={clsx(classes.button)}
            type="submit"
            variant="contained">
            {'Delete'}
          </Button>   
</Box>

{'Update'}
{'Delete'}

不适合我