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

Question

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

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

Answer 1

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

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

initializeIcons();