Fluent UI 中没有“X”的关闭按钮

问题描述

我正在尝试使用 Fluent UI 创建一个 TeachingBubble。我希望它有关闭按钮，标有“x”。 我想要一个像这个例子中的关闭按钮：

如何在 react 中使用 Fluent UI 做到这一点？

我当前的代码：

import { TeachingBubble } from "@fluentui/react";

interface IOnboardingProps {
  actionFunction?: () => void;
  closeFunction?: () => void;
}

const Onboarding2: React.FC<IOnboardingProps> = ({
  actionFunction = () => {},closeFunction = () => {},}) => {
  return (
    <TeachingBubble
      headline="How to get started"
      hasCloseButton={true}
      closeButtonAriaLabel="Blabla"
      onDismiss={() => {
        console.log("Close button pressed.");
        closeFunction();
        console.log("Passed function done.");
      }}
      primaryButtonProps={{ children: "Done",onClick: () => actionFunction() }}
    >
      Some instructions
    </TeachingBubble>
  );
};

export default Onboarding2;

这就是我得到的：

关闭按钮存在，但没有“X”。当“hasCloseButton”设置为true时，我认为默认添加了“X”。

解决方法

“x”图标未呈现的原因是图标未初始化。这是通过添加：

SERVER02