javascript - 不能将 Gatsby Link 与 justify-content 一起使用

Question

我有一个使用 Gatsby Link 和样式组件的导航组件

原始导航组件

import React from "react"
import styled from "styled-components"
import { Link } from "gatsby"

const NavWrapper = styled.nav`
  display: flex;
  justify-content: flex-end;
  @media screen and (max-width: 769px) {
    display: none;
  }
`

const NavItem = styled(props => <Link {...props} />)`
  font-size: 1.4rem;
  color: #eeeeee;
  margin: 20px 15px 0 0;
  padding-right: 15px;
  text-decoration: none;
  border-right: 1px solid #eeeeee;
  line-height: 80%;
  &:nth-child(4) {
    border-right: none;
  }
`

const DesktopNav = () => (
  <NavWrapper>
    <NavItem to="/" activeClassName="active">
      home
    </NavItem>
    <NavItem to="/portfolio" activeClassName="active">
      portfolio
    </NavItem>
    <NavItem to="/about" activeClassName="active">
      about
    </NavItem>
    <NavItem to="/contact" activeClassName="active">
      contact
    </NavItem>
  </NavWrapper>
)

export default DesktopNav

但是当我justify-content用来对齐导航时，没有一个链接是可点击的。我尝试在不使用 Gatsby Link 的情况下重新构建导航，如下所示：

重建导航组件

const DesktopNav = () => (
    <nav>
        <ul>
            <li><a href="/">home</a></li>
            <li><a href="/portfolio">portfolio</a></li>
            <li><a href="/about">about</a></li>
            <li><a href="/contact">contact</a></li>
        </ul>
    </nav>
)

export default DesktopNav

但仍然在任何时候我justify-content用来对齐导航时，没有一个链接是可点击的，尽管我可以在浏览器控制台中看到为每个元素设置的 href。

我还发现，如果我删除justify-content但保留display: flex;一些导航链接是可点击的，而其他的则不是。我不确定这是否与display: flex;将容器设置为块元素有关，或者这是否是某种错误？我已经在 Firefox 和 Chrome 中使用最新版本的 Gatsby 进行了尝试，但没有成功。任何帮助将不胜感激！

标签： javascriptreactjsgatsby