Question

在办公室 - ui反应面料我如何骑过chevon图标 https://developer.microsoft.com/en-us/fabric#/components/nav

在文档中有这个界面

INavStyles

但我无法使用自己的图标覆盖它。我想用 FolderHorizontal 和 OpenFolderHorizontal 图标替换现有的V形图标

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

您可以在Nav组件上设置getStyles属性以将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' }
    />

解决方案基本上是隐藏原始的V形，禁用旋转并在后台显示所需的图标。

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

更新[20180417]

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

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

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

导入initializeIcons。

覆盖officeUI nav chevron图标

1 个答案: