javascript - 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 组件添加内联样式。 Gatsby 的<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;            
   }