css - react 中的样式链接

Question

我想弄清楚如何在 React 中设置链接样式。

我看过 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>

“颜色”css 字段适用，但所有 a 标签链接均无效。当您将鼠标悬停在链接上时，它会变成蓝色下划线。 css 检查器显示 webkit 样式被误用，指针除外。

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

Answer 1

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

我认为问题在于您将类(class)放在哪里。 CSS 需要一个带有 footerlinks 类的组件，后面跟着一个 a 元素。

尝试将您的代码更改为:

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