So I have this:

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

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

I want to put a hover effect on just the Link element to change the color to white. Any other docs I have seen would have me put a hover call when I call Link:

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

How do I place the a:hover in the styling for the Link component?

So I have this:

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

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

I want to put a hover effect on just the Link element to change the color to white. Any other docs I have seen would have me put a hover call when I call Link:

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

How do I place the a:hover in the styling for the Link component?

• javascript
• reactjs
• styled-components

1 Answer 1

@psion have you checked something like the following code:

const Link = styled.a`
  color: blue;

  &:hover {
    color: white;
  }
`;

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