盖茨比当前链接颜色

Question

我是Gatsby的新手，js并做出反应，但我正努力创建一个尽我所能的网站。到目前为止，我已经能够通过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>。一个简单的方法是将className提供给包含<ListLink />的“Product”页面组件。因此，假设您的页面组件的类名是.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>