How to get FluentUI styling when using Gatsby Link component

Question

I am using Microsoft's fluent ui starter kit for gatsby.js. If I use the gatsby Link component, then I do not get the styling of the FluentUI. But if I use the fluentui Link component, I do not get the behavior of the gatsyby link component, which is linking to other pages within the gatsby site. I.e.

I want to use this:

import { Link } from 'gatsby';

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

with the styling I would have got if I used this:

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

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

How do I get the gatsby link functionality with the FluentUI Link styling?

Answer 1

You should change your structure to adapt them to the Fluent Design. Nav component is what you are looking for. This is a sample of how to build a navigation pane with 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 component accepts as a prop, a group of links and handles it automatically with the pair name and url properties.