如何在 Fluent UI 上下文菜单中使用 FluentUI React Northstar 图标

Question

我们正在使用 Fluent UI React 上下文菜单，因为 Fluent UI Northstar 库不包含上下文菜单组件。但是，我们想使用 Fluent UI Northstar 库中的 MS Teams 图标，但我似乎找不到任何关于如何使用 JSX/Component 作为上下文菜单上的图标的文档。任何想法如何做到这一点？

来自 Microsoft 的相关文档： Fluent UI Context Menu Icon Property Fluent UI Northstar Icons

Answer 1

上下文菜单有一个属性contextualMenuItemAs，您可以将 menuItemTemplate 函数传递给该属性。以下是如何制作该功能的示例：

  const menuItemTemplate: React.FunctionComponent<IContextualMenuItemProps> = menuItemProps => {

const getIcon = (key: string): JSX.Element => {
  switch (key) {
    case 'phone':
      return <CallIcon outline />;
    case 'chat':
      return <ChatIcon outline />;
    default:
      return <span></span>;
  }
}

return (
  <div>
    <span className={contextMenuItemIconStyle}>{getIcon(menuItemProps.item.key)}</span>
    <span className={contextMenuItemTextStyle}>{menuItemProps.item.text}</span>
  </div>
  )};

然后，您必须设置自己的样式来设置这些菜单项跨度的样式。