react中的样式链接答案

【问题标题】：Styling links in reactreact中的样式链接
【发布时间】：2019-09-27 21:45:04
【问题描述】：

我正在尝试弄清楚如何在反应中设置链接样式。

我看过this post 并尝试了大部分建议。

我已将页脚样式类定义为：

.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>

'color' css 字段适用，但所有 a 标签链接都不起作用。当您将鼠标悬停在链接上时，它会变为蓝色下划线。 css 检查器向 webkit 显示样式已被误用，但指针除外。

在 react 中设置标签样式的技巧是什么？

【问题讨论】：

标签： css reactjs jsx

【解决方案1】：

它应该与普通的 HTML 和 CSS 一样工作。假设你使用的是 react-router 或类似的，Link 应该会生成一个a 标签。

我认为问题在于您将课程放在哪里。 CSS 需要一个类 footerlinks 后跟 a 元素的组件。

尝试将您的代码更改为：

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

【讨论】：

谢谢！我试过一百万个版本，但不是那个

【解决方案2】：

如果你直接想在 react 链接上应用 css，你还有另一个选择是

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

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

【讨论】：