MUI 按钮不会居中

Question

我可能有一个古老的问题，但我的按钮不配合！这是我第一次使用MUI，所以可能有一些我不明白的地方。

请看一下沙箱。

我希望按钮居中排列，中间留有一点空间。我真的以为

<Box display="flex" justifyContent="space-between" flexDirection="row">

会起作用，但它只是把它们全部打碎在左边。

我错过了一些明显的东西吗？感谢您的任何帮助！

Answer 1

如果您想要居中对齐按钮，请从 更改为space-between。center您可以尝试此处的交互式示例，以了解有关 的不同值的更多信息justify-content。

justifyContent="center"

编辑：flexbox是一个容器，您需要将其放在外面并将所有按钮放入其中，您也可以Stack在v5中使用，它本质上是一个Box显示设置flex：

<Stack
  justifyContent="center"
  gap={2}
  flexDirection="row"
  width={1.0}
  flexWrap="wrap"
>
  {mapButtons}
</Stack>