gatsby - 使用 Gatsby Link 组件时如何获得 FluentUI 样式

Question

我正在为 gatsby.js 使用 Microsoft 的 fluent ui starter kit。如果我使用 gatsby Link 组件，那么我不会得到 FluentUI 的样式。但是如果我使用 fluentui Link 组件，我不会得到 gatsby 链接组件的行为，它链接到 gatsby 站点内的其他页面。IE

我想用这个：

import { Link } from 'gatsby';

<Link to="/contact/">Contact</Link>

如果我使用这个，我会得到的样式：

   import { Link } from '@fluentui/react';

   <Link href="/contact/">Contact</Link>

如何使用 FluentUI Link 样式获得 gatsby 链接功能？

Answer 1

您应该更改您的结构以使它们适应 Fluent 设计。Nav组件是您正在寻找的。这是如何使用 Fluent Design + Gatsby 构建导航窗格的示例：

import React from 'react';
import { Nav, initializeIcons } from '@fluentui/react';

const navigationStyles = {
  root: {
    height: '100vh',
    boxSizing: 'border-box',
    border: '1px solid #eee',
    overflowY: 'auto',
    paddingTop: '10vh',
  },
};

const links = [
  {
    links: [
      {
        name: 'Home',
        key:'key1',
        url: '/',
        iconProps: {
          iconName: 'News',
          styles: {
            root: {
              fontSize: 20,
              color: '#106ebe',
            },
          }
        }
      },
      {
        name: 'Contact',
        key: 'key2',
        url: '/contact',
        iconProps: {
          iconName: 'PlayerSettings',
          styles: {
            root: {
              fontSize: 20,
              color: '#106ebe',
            },
          }
        }
      },
    ],
  },
];

const Navigation = () => {
  return (
    <Nav
      groups={links}
      selectedKey='key1'
      styles={navigationStyles}
    />
  );
};

export default Navigation;

Nav组件接受一组链接，并使用对和属性prop自动处理它。nameurl