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

【问题标题】：hover underline - react router link vs styled-component link悬停下划线 - 反应路由器链接与样式化组件链接
【发布时间】：2020-07-18 11:30:26
【问题描述】：

我使用了两个不同的链接：

对于这个样式化组件链接，当我将鼠标悬停在它上面时，它会带有下划线。我不希望这种情况发生。

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

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

第二个链接是这样的：

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

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

css 是一样的。那为什么第一个表现不一样呢？

【问题讨论】：

它们有何不同？
在我的应用程序中，如果我将鼠标悬停在 StyledLink 上，它会带有下划线。我不想要那个。但是，在我的第二个联系人链接中，它没有下划线，即使 css 看起来相同 @O.o
你能检查一下吗？ stackoverflow.com/questions/43087007/…
无法重现它。查看在线演示codesandbox.io/s/hopeful-hooks-npl8q
你使用的是 react-router 还是 react-router-dom？

标签： javascript html css reactjs typescript

【解决方案1】：

在 StyledLink 中添加这个有效：

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

【讨论】：

【解决方案2】：

好吧，它突然在 _app.tsx 中使用：

import "../styles/globals.scss";

globals.scss：

a:-webkit-any-link {
  text-decoration: none !important;
}

a:hover -webkit-any-link {
  text-decoration: none !important;
}

a:hover {
  text-decoration: "none";
}

链接如下所示：

import NextLink from "next/link";
import Link from "@chakra-ui/react";

  <NextLink href="/" passHref>
    <Link>
       Link
    </Link>
  </NextLink>

干杯

【讨论】：