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字段适用，但没有一个标签链接起作用。当您将鼠标悬停在链接上时，它会变成蓝色下划线。 css检查器向Webkit显示，除指针外，Webkit的样式已被错误应用。

在标签中设置标签样式的诀窍是什么？

Answer 1

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

我认为问题出在你上课的地方。 CSS期望组件的类别为footerlinks，其后是a元素。

尝试将您的代码更改为：

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

Answer 2

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

您可以使用// Promise based const footer = $('lib-footer > mat-toolbar'); // or element(by.css('')); let viewportOffset = ''; browser.executeScript('return arguments[0].getBoundingClientRect()', footer).then(value => { viewportOffset = value; }); const bottom = viewportOffset.bottom; browser.driver.manage().window().getSize().then((size) => { expect(bottom).toBeGreaterThan(size.height - 50); }); // async/await - Highly recommended. Don't forget to add `async` before the function to use `await` const footer = $('lib-footer > mat-toolbar'); const viewportOffset = await browser.executeScript('return arguments[0].getBoundingClientRect()', footer); const bottom = viewportOffset.bottom; const windowSize = await browser.driver.manage().window().getSize(); expect(bottom).toBeGreaterThan(windowSize.height - 50);代替<NavLink>

<Link>

反应中的样式链接

2 个答案: