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，则可以在单独的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>

盖茨比当前链接颜色

2 个答案: