Fluent UI中PivotItem组件图标不显示问题求助

我用React结合Fluent UI开发页面，用Pivot组件做顶部导航，给PivotItem设置了itemIcon属性，但标签里的图标就是不显示。

代码片段 #

return <div>
        <Pivot>{
            headerItems.map( (item: IHeaderItem) => (
                <PivotItem itemKey={item.id} headerText={item.name} itemIcon="Globe">
                </PivotItem>
            ))
        }
        </Pivot>
    </div>

效果截图 #

解决办法 #

1. 适配Fluent UI版本的API用法 #

Fluent UI不同版本的Pivot组件API差异很大，别用错属性：

• v8版本：推荐用iconProps替代itemIcon，需要导入对应图标组件：

  import { GlobeIcon } from '@fluentui/react-icons';
  
  <PivotItem 
    itemKey={item.id} 
    headerText={item.name} 
    iconProps={{ icon: GlobeIcon }}
  >
  </PivotItem>
  

  要是非要用字符串图标名，得确保项目里加载了Fluent UI的图标字体包，不过这种方式已经不推荐了。

• v9版本：API完全重构，PivotItem要用icon属性传入图标组件实例，同时itemKey换成value，headerText换成header：

  import { Pivot, PivotItem } from '@fluentui/react-components';
  import { GlobeRegular } from '@fluentui/react-icons';
  
  <Pivot>
    {headerItems.map((item: IHeaderItem) => (
      <PivotItem 
        value={item.id} 
        header={item.name} 
        icon={<GlobeRegular />}
      >
      </PivotItem>
    ))}
  </Pivot>
  

2. 检查图标名称/组件是否正确 #

不管用哪种方式，要确认图标名称或导入的组件是Fluent UI官方提供的，比如Globe对应v8的GlobeIcon，v9的GlobeRegular/GlobeFilled，别写错名字。

3. 排查样式问题 #

打开浏览器开发者工具，查看Pivot头部的图标元素，看看是不是被自定义样式设成了display: none、opacity: 0，或者被其他元素覆盖了，调整样式优先级即可。

内容的提问来源于stack exchange，提问作者Saurav Likhar