fluent-ui - 如何在 TeachingBubble FluentUI 组件中居中按钮？

Question

我正在使用 Fluent UI 的TeachingBubble 组件。我希望它有一个按钮，应该居中。怎么可能呢？我无法从右下角移动它。

当前代码：

      <TeachingBubble
        headline="Welcome"
        primaryButtonProps={{
          children: "Next",
          onClick: () => alert("Primary button pressed!"),
        }}
      >
        This is some content.
      </TeachingBubble>

这输出：

应该在此代码中添加什么以使主按钮居中（在我标记的红十字处）？

Answer 1

按钮在 TeachingBubble 的页脚部分，所以页脚的样式应该改变：

<TeachingBubble
        headline="Welcome"
        primaryButtonProps={{
          children: "Next",
          onClick: () => alert("Primary button pressed!"),
        }}
        styles={{
          footer: {
            display: "flex",
            justifyContent: "center",
          },
        }}
      >
        Some text
      </TeachingBubble>

呈现为：