CODEWITHSUNDEEP
javascriptreactjsstyled-components
psion
psion

Reputation: 758

Hover on a styled component without wrapper

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?

Upvotes: 3

Views: 17621

Answers (1)

salman.zare
salman.zare

Reputation: 649

@psion have you checked something like the following code:

const Link = styled.a`
  color: blue;

  &:hover {
    color: white;
  }
`;

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

Upvotes: 18

Related Questions