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

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

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

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

解决方法

上下文菜单有一个属性 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>
  )};

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