Next.js: with-emotion: When adding `css` prop to `a` inside `Link`, the `href` disappears

Created on 3 Dec 2019 · 2Comments · Source: vercel/next.js

Bug report

Describe the bug

When using Emotion with the css prop to style elements, I came across a small issue where the href attribute of an a insideLink is disappearing.

To Reproduce

See the comment in this Sandbox (really small example):
https://codesandbox.io/s/nextjs-with-emotion-eyfhy

Expected behavior

Should not remove the href attribute from the a inside Link

System information

Chrome: 76.0.3809.146
Node.js: 12.4.0
OS: Darwin x64 18.7.0 (macOS 10.14.6)
Next.js: 9.1.3

Source

alexilyaev

👍3

Most helpful comment

Here's the solution for your case (this is not a Next.js bug):

-    <Link href="/about">
+    <Link href="/about" passHref={true}>
       <a css={linkStyles}>About</a>
     </Link>

Docs: https://github.com/zeit/next.js#forcing-the-link-to-expose-href-to-its-child

The reason why Next.js does not recognise <a /> in your example is because Emotion replaces this basic element with a library-specific component in order to support css attribute.

kachkaev on 3 Dec 2019

👍5

All 2 comments

Here's the solution for your case (this is not a Next.js bug):

-    <Link href="/about">
+    <Link href="/about" passHref={true}>
       <a css={linkStyles}>About</a>
     </Link>

Docs: https://github.com/zeit/next.js#forcing-the-link-to-expose-href-to-its-child

The reason why Next.js does not recognise <a /> in your example is because Emotion replaces this basic element with a library-specific component in order to support css attribute.

kachkaev on 3 Dec 2019

👍5

@kachkaev Thanks for the quick response, that works!

alexilyaev on 3 Dec 2019

🎉1

Was this page helpful?

0 / 5 - 0 ratings