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

Question

我正在使用 Microsoft's fluent ui starter kit for gatsby.js。如果我使用 gatsby Link 组件，那么我不会获得 FluentUI 的样式。但是，如果我使用 fluentui Link 组件，我不会得到 gatsyby link 组件的行为，即 linking 到 gatsby 站点内的其他页面。即

我想用这个：

import { Link } from 'gatsby';

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

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

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

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

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

Answer 1

您应该更改您的结构以使其适应 Fluent Design。 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，并使用 name 和 url 属性对自动处理它。

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

How to get FluentUI styling when using Gatsby Link component

gatsby

fluent-ui

fluentui-react