如何在 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>
  )};

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