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

zeckdude commented 1 year ago

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 commented 1 year ago

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), 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 commented 1 year ago

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), 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 commented 1 year ago

I added global styles by using

vercel / next.js