Javascript 盖茨比电流链接颜色

我是盖茨比、js和react的新手，但我正在尽我所能创建一个网站。到目前为止，我已经能够通过混合使用盖茨比和css教程来解决大多数问题。然而，我只想做一个小小的改变。我在我的网站上有一个带有导航链接的标题，我在标题中添加了一个列表链接

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>

const ListLink=props=>

{props.children}

---

我想有一个不同颜色的当前链接，所以如果你在“产品”页面上，“产品”的链接是橙色而不是蓝色。我不知道如何使用ListLink实现这一点，您不能直接向React组件添加内嵌样式。盖茨比的

实际上是

。一个简单的方法是给包含

的“产品”页面组件指定

类名。因此，假设页面组件的类名为
.product
，在单独的css中，您可以将链接设置为：

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

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

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

const ListLink=props=>

{props.children}