Javascript 悬停下划线-反应路由器链接与样式化组件链接

我使用两个不同的链接：

对于这个样式化的组件链接，当我将鼠标悬停在它上面时，它会带下划线。我不想那样

export const StyledLink = styled(Link)`
  href: #;
  text-decoration: none;
  color: black;
`;

<StyledLink href={'/login'}> SIGN</StyledLink>

export const StyledLink=styled（链接）`
href:#；
文字装饰：无；
颜色：黑色；
`;
签名

第二个环节是这样的：

<Link className="link-buttons" to={'/login'}>
        {' '}
        Contact
      </Link>

  .link-buttons{
    text-decoration: none;
  }

{' '}
联系
.链接按钮{
文字装饰：无；
}

---

css是相同的。那么为什么第一个会有不同的表现呢？

在StyledLink中添加此选项会起作用：

 &:focus, &:hover, &:visited, &:link, &:active {
    text-decoration: none;
}

---

它们有何不同？在我的应用程序中，如果我将鼠标悬停在StyledLink上，它会带下划线。我不想那样。然而，在我的第二个联系人链接中，它没有下划线，即使css看起来相同@O.oCan你能检查一下吗？无法复制它。检查在线演示您使用的是react路由器还是react路由器dom？