reactjs - 覆盖 officeUI nav chevron 图标

Question

在 office-ui 反应结构中，我如何超越 V 形图标 https://developer.microsoft.com/en-us/fabric#/components/nav

在文档中有这个接口

INavStyles 

但我无法用我自己的图标覆盖它。我想用FolderHorizo​​ntal和OpenFolderHorizo​​ntal图标替换现有的 chevron

import { AppContainer } from 'react-hot-loader';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Nav, INavProps } from 'office-ui-fabric-react/lib/Nav';

import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
initializeIcons(/* optional base url */);

....
....


public _getNavLink(): any[] {
return [
  {
    name: 'Home',
    url: '',
    links: [{
      name: 'Activity',
      url: '',
      key: 'key1'
    },
    {
      name: 'News',
      url: '',
      key: 'key2'
    }],
    isExpanded: true
  }
]}

public render() {
return (
  <div>
    <Nav
         getStyles={() => {
          return {
            chevronIcon: {
              color: 'transparent',
              transform: 'rotate(0)',
              selectors: {
                '&:before': {
                  color: 'rgb(51, 51, 51)',
                  fontFamily: "FabricMDL2Icons-7",
                  content: '"\\F12B"',
                },
                '.is-expanded > * > &:before': {
                  fontFamily: "FabricMDL2Icons-5",
                  content: '"\\ED25"',
                }
              }
            }
          }
        }}
      groups={
        [
          {
            links: this._getNavLink() 
          }
        ]
      }
      expandedStateText={ 'expanded' }
      collapsedStateText={ 'collapsed' }
      selectedKey={ 'key3' }
    />
  </div>
);

}

Answer 1

您可以getStyles在 Nav 组件上设置属性以将 CSS 应用于 chevronIcon 插槽：

<Nav
    getStyles={ () => { return { 
        chevronIcon: { 
          color: 'transparent',
          transform: 'rotate(0)',
          selectors: {
            '&:before': { 
              color: 'rgb(51, 51, 51)', 
              fontFamily: "FabricMDL2Icons-7",
              content: '"\\F12B"',
            },
            '.is-expanded > * > &:before': { 
              fontFamily: "FabricMDL2Icons-5",
              content: '"\\ED25"',
            }
          }
        }
      }} }
      groups={...}
      expandedStateText={ 'expanded' }
      collapsedStateText={ 'collapsed' }
      selectedKey={ 'key3' }
    />

解决方案基本上是隐藏原始人字形，禁用旋转并在背景中显示所需的图标。

请注意， 和 的图标FolderHorizontal是OpenFolderHorizontal使用它们的 Unicode 表示设置的，可以在 Github 存储库中查找（例如https://github.com/OfficeDev/office-ui-fabric-react/search?q=FolderHorizo ​​ntal ）。这两个图标存在于不同的字体系列中，因此使用了 fontFamily 指令。

更新 [20180417]

确保使用initializeIcons();或使用自定义路径初始化字体。然后应该加载字体文件并出现在您的 DevTools 中：

请注意 - 与您的代码不同 - 我们正在使用

import { initializeIcons } from '@uifabric/icons';

导入initializeIcons.