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

问题描述

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

我想用这个：

n    Time (sec)
10   0.00001000
50   0.00017500
100  0.00062900
200  0.00231200
300  0.00561900
500  0.01681900
1000 0.06701700

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

import { Link } from 'gatsby';

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

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

解决方法

您应该更改您的结构以使其适应 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',],];

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

export default Navigation;

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