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

Question

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

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

我当前的代码：

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”。

Answer 1

“x”图标没有渲染的原因是图标没有初始化。这是通过添加：

import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons();