Styled JSX class not being applied to anchor tag via Link component

[zeckdude]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.8.1
      npm: 9.6.5
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.1
      eslint-config-next: 13.3.1
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://stackblitz.com/edit/nextjs-x3gz1j?file=pages%2Findex.js

To Reproduce

• Visit link
• Observe that the Link component classname (via styled JSX) only applies the class name without the JSX class name
• Observe that it works in the Legacy Link component

Describe the Bug

The styled JSX classname isn't passed to the anchor tag that is generated by the Link component

Expected Behavior

The styled JSX classname should be passed to the anchor tag that is generated by the Link component

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[soumengope]

It's working perfectly when I used an external CSS file with the same class name.

or when I used styles inside the Link component : <Link href="/about" style={{ color: 'red',}}>Go to About Page (using Link component)</Link>, and I know this won't be a solution for this issue. Let me know if there has a best way to solve this issue, I really wanna know.Thank you.

[zeckdude]

It's working perfectly when I used an external CSS file with the same class name.

or

when I used styles inside the Link component : <Link href="/about" style={{ color: 'red',}}>Go to About Page (using Link component)</Link>, and I know this won't be a solution for this issue.

Let me know if there has a best way to solve this issue, I really wanna know.Thank you.

Yeah the external CSS file works fine since it passes on the class name to the anchor just fine. The way that styled jsx works is that it creates its own unique class name that it usually attaches to the element as well so that the class is namespaced. It seems that when Next/Link passes on the class to the anchor it is not passing on the namespacing styled jsx class name as well so it doesn't work.

[soumengope]

I added global styles by using

[zeckdude]

Yes adding it globally is a workaround but it's not a fix for the bug

[yun77op]

i had been stumbled over this problem, however styled-jsx is used without next.js's companion in my case.

i find it's expected which unique className is not generated for custom components and the resolve tag is used to solve this problem

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.