React中的造型链接

Question

我正在尝试弄清楚如何在react中样式链接。

我已经看过这篇文章，并尝试了大多数建议。

我将页脚样式类定义为：

.footerlinks {
    a:link {color: $Hand3};
    font-weight: 300;
    font-family: $secondary-font;
    a:link {text-decoration:none; background-color:transparent; color: #FAF5F2;};
    a:visited {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    a:hover {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    a:active {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    color: $Hand3;
}

然后，我有一个页脚链接为：

<Link to={'/about'} className="footerlinks">About</Link>

"颜色" CSS字段适用，但是A标签链接都没有工作。当您悬停在链接上时，它会变成蓝色下划线。CSS检查员显示Webkit造型被误用了，除指针外。

在React中造型标签的诀窍是什么？

Answer 1

它应该与常规HTML和CSS相同。假设您使用的是React-Router或类似的Link，则应生成a标签。

我认为问题是您放了班。CSS期望具有footerlinks类的组件，然后是内部的a元素。

尝试将代码更改为：

<div className="footerlinks">
  <Link to={'/about'}>About</Link>
</div>

Answer 2

如果您直接想在React链接上应用CSS，则有另一个选项

您可以使用<NavLink>代替<Link>

<NavLink 
   className="CssClassForNormalLinks" 
   activeClassName={location.pathname !== "your pathname"? null : "CssClassForActiveLinks"}
   to="/home"
   >
   HOME
</NavLink>