reactjs - MUI 按钮不会居中

Question

我可能有一个由来已久的问题，但我的按钮无法配合!这是我第一次使用 MUI，所以可能有些地方我不明白。

请看sandbox .

我希望按钮在一行中居中，中间有一点空间。我真的以为

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

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

我是否遗漏了一些明显的东西？感谢您的帮助!

Answer 1

如果您希望按钮居中对齐，请将 space-between 更改为 center。您可以在交互式示例中玩耍 here了解有关 justify-content 的不同值的更多信息。

justifyContent="center"

编辑:flexbox是一个容器，你需要把它放在外面，把所有的按钮都放在里面，你也可以在v5中使用Stack，它本质上是一个 Box 显示设置 flex:

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