如何在 TeachingBubble FluentUI 组件中居中按钮？答案

【问题标题】：How to center button in TeachingBubble FluentUI component?如何在 TeachingBubble FluentUI 组件中居中按钮？
【发布时间】：2021-05-13 15:03:22
【问题描述】：

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

当前代码：

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

这个输出：

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

【问题讨论】：

标签： fluent-ui office-fabric fluentui-react

【解决方案1】：

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

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

呈现为：

【讨论】：