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

问题描述

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

当前代码：

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

输出：

应该在这段代码中添加什么，以便主按钮居中（在我标记的红色十字处）？

解决方法

Button 在TeachingBubble 的footer 部分，所以footer 的样式应该改变：

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

呈现为：