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

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>