为 FluentUI IconButton 组件提供 menuProps 时如何删除人字形图标

Question

我不想在 IconButton 中的图标旁边显示人字形（向下箭头）

const Support = (): React.ReactElement => {
  return (
    <IconButton
      iconProps={{ iconName: 'unknown' }}
      menuProps={menuItems}
    />
  )
}

你知道怎么做吗？我尝试将 ContextualMenu 与 IconButton 一起使用，但菜单位置错误（我怀疑这是由于位于分层堆栈内）。

Answer 1

在 IconButton 组件中使用 onRenderMenuIcon:

const Support = (): React.ReactElement => {
  return (
    <IconButton
      menuProps={menuItems}
      onRenderMenuIcon={() => <div />} // also you can return undefined | null.
    />
  )
}

Codepen working example.

为 FluentUI IconButton 组件提供 menuProps 时如何删除人字形图标

How to remove chevron icon when providing menuProps for a FluentUI IconButton component

fluent-ui

fluentui-react