Gatsby当前链接颜色

Question

我是Gatsby，js和react的新手，但我正在尽我最大的能力创建一个网站。到目前为止，我已经能够通过混合使用gatsby和css教程来解决大多数问题。然而，我被困在了一个我想做的小改变上。我在我的网站上有一个标题，上面有我用ListLink添加的导航链接

const ListLink = props =>
<li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to} style={{ fontSize: '17px', textTransform: 'uppercase', fontFamily: 'Roboto-Thin', textShadow: `none`, margin: "0", color: '#4a71b6', backgroundImage: `none`}}>
        {props.children}
    </Link>
</li>

我想让当前的链接有不同的颜色，所以如果你在“产品”页面，“产品”的链接是橙色的而不是蓝色的。我不确定如何使用ListLink来实现这一点

Answer 1

不能将内联样式直接添加到React组件。盖茨比的<Link>实际上是<a>。一种简单的方法是为包含<ListLink />的“产品”页面的组件提供一个className。因此，假设页面组件的类名是.product，您可以在单独的css中设置链接样式，如下所示：

  .product li a {
      font-zize: 17px; 
      text-transform: uppercase; 
      font-family: 'Roboto-Thin'; 
      text-shadow: none; 
      margin: 0; 
      color: #4a71b6; 
      backgroundImage: none;            
   }

Answer 2

您可以将activeClassName或activeStyle传递给所有链接，如果它是当前页面，则会应用它们

 const ListLink = props =>
   <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to} className="link" activeClassName="current">
      {props.children}
    </Link>
   </li>