наведите курсор на подчеркивание - отреагируйте на ссылку маршрутизатора и ссылку на стиль-компонент

Question

Я использую две разные ссылки:

Для этой ссылки на стилизованный компонент, когда я наводю на нее курсор, она подчеркивается. Я не хочу, чтобы это произошло.

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 то же самое. Тогда почему первый действует по-другому?

Answer 1

Добавление этого в StyledLink сработало:

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