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

我正在使用。如果我使用盖茨比链接组件，那么我就无法获得FluentUI的样式。但是如果我使用fluentui链接组件，我不会得到gatsyby链接组件的行为，它链接到gatsby站点中的其他页面。即

我想用这个：

import { Link } from 'gatsby';

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

import{Link}来自“盖茨比”；
接触

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

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

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

从'@fluentui/react'导入{Link}；
接触

---

如何通过FluentUI链接样式获得gatsby链接功能？

您应该改变结构，使其适应Fluent设计<代码>导航组件就是您要寻找的。这是如何使用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;

从“React”导入React；
从'@fluentui/react'导入{Nav，initializecons}；
const navigationStyles={
根目录：{
高度：“100vh”，
框大小：“边框框”，
边框：“1px实心#eee”，
溢出：“自动”，
paddingTop:'10vh'，
},
};
常量链接=[
{
链接：[
{
姓名：'家'，
键：'key1'，
url:“/”，
iconProps：{
我的名字是：“新闻”，
风格：{
根目录：{
尺寸：20，
颜色：“#106ebe”，
},
}
}
},
{
姓名：'联系人'，
键：“键2”，
url:“/contact”，
iconProps：{
我的名字是：“球员设置”，
风格：{
根目录：{
尺寸：20，
颜色：“#106ebe”，
},
}
}
},
],
},
];
常量导航=（）=>{
返回(
);
};
导出默认导航；

Nav

组件接受一组链接作为

prop

，并使用

name

和

url

属性对其进行自动处理