Next.js: Link as a StyledComponent

[edygar]

The way Link is implemented right now, it's impossible to compose styles using styled-components without generating <a><a></a></a>.

#241 would solve. Any updates on turning Link a behavior decorator only?

[timneutkens]

@edygar you mean <Link href="/"><a>content</a></Link> right?

Deprecation message has just been added in https://github.com/zeit/next.js/pull/797 👍
We're only going to support the explicit given example: <Link href="/"><a>content</a></Link>

Does this solve your question?

[jlcarvalho]

@timneutkens in this case the a don't get the styles.

import Link from 'next/prefetch'
import styled from 'styled-components'

const MenuItem = styled.li`
  margin: 0 10px;
  list-style: none;
`;

const MenuLink = styled(Link)`
  font-weight: 700;
  line-height: 2.88;
`

export default () => (
  <MenuItem>
    <MenuLink href='/signin'>
      <a>Sign In</a>
    </MenuLink>
  <MenuItem>
)

Result:

<li class="cjJDVk" data-reactid="8">
  <a href="/signin" data-reactid="9">Sign In</a>
</li>

[impronunciable]

@jlcarvalho Yes, you should style the <a>:

import Link from 'next/prefetch'
import styled from 'styled-components'

const MenuLink = styled.a`
  font-weight: 700;
  line-height: 2.88;
`

export default () => (
  <Link href='/signin'>
    <MenuLink>Sign In</MenuLink>
  </Link>
)

[jlcarvalho]

@impronunciable I tried, but the output was:

<li class="ePmGlD">
  <a href="/signin">
    <a class="jbHZic">Sign In</a>
  </a>
</li>

[impronunciable]

Oh, I see. That's because the styled component is not an anchor. We are going to deprecate this behavior but I don't see a fix for this in the meanwhile

[edygar]

Exactly as @jlcarvalho said.

@impronunciable, why does it matters for Link the Element.type of its first child? I think it could only provide the click behavior. Currently it's only discouraging composability.

[timneutkens]

Please see https://github.com/zeit/next.js/issues/816 👍

[chhuang]

I tried this and it seems to be working fine?

import Link from 'next/link';
import styled from 'styled-components';

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

export default ({ children }) => (  
  <Link>
    <StyledLink>{ children }</StyledLink>
  </Link>
);