将鼠标悬停在没有包装器的样式组件上

Question

所以我有这个：

const Link = styled.a`
    color: blue;
`;

<Wrapper>
    <Link href="/">Hover Change</Link>
<Wrapper>

我只想在 Link 元素上放置悬停效果以将颜色更改为白色。我看过的任何其他文档都会让我在调用 Link 时进行悬停调用：

const Wrapper=styled.div`
    &:hover ${Link}: white;
';
<Wrapper>
    <Link href="/">Hover Me</Link>
<Wrapper>

如何将 a:hover 放置在 Link 组件的样式中？

Answer 1

@psion 您是否检查过类似以下代码的内容：

const Link = styled.a`
  color: blue;

  &:hover {
    color: white;
  }
`;

<Link href="/">Hover Change</Link>