Link as styled component

I followed #799 but couldn’t get a clean way to have a styled-component link, I had to duplicate the href:

const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) => (
  <Link prefetch href={href}>
    <StyledLink href={href}>{name}</StyledLink>
  </Link>
)

What’s the proper way to make styled-component links?

Using next.js 2.3.1.

[bitwisemanager]

Hey guys. At version 3.0.1-beta.13+, you could set passHref to Link (as a boolean property) to expose its href to styled-components (or any other library that wraps its <a/> tag).

Using the first example of issue: it could be done this way:

const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) => (
  <Link prefetch href={href} passHref>
    <StyledLink>{name}</StyledLink>
  </Link>
)

[kennylavender]

You can pass a component to styledcomponents instead of using a tag https://github.com/styled-components/styled-components#third-party-components

import Link from 'next/link'
const StyledLink = styled(Link)`
  color: red;
  background: blue;
`

Use it

export default () => (<div><StyledLink href="mylink">MyText</StyledLink></div>)