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

Question

我们使用Fluent UI React上下文菜单，因为Fluent UI Northstar库不包含上下文菜单组件。但是，我们希望使用Fluent UI Northstar库中的MS Teams图标，但我似乎找不到任何有关如何使用JSX/Component作为上下文菜单上的图标的文档。有什么办法可以做到这一点吗？

来自微软的相关文档：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>
  )};

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