Skip to content

AppDir: component styles get overridden every time new component instances load #42862

@ErAz7

Description

@ErAz7

Verify canary release

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

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
Binaries:
Node: 18.12.0
npm: 8.19.2
Yarn: 1.22.17
pnpm: N/A
Relevant packages:
next: 13.0.3
eslint-config-next: 13.0.1
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Whenever a new component loads, it overrides any custom styling on that component.
For example lets say I have a Link component that has color: gray and I've used it in header but because header is gray itself, I've added a custom styling for that link as color: white.
Now imagine I have another page that uses same Link component but with default styles this time (color: gray)
Open the app's home page (which does not have any link inside, only in header), everything fine, navigate to the other page that is using Link component, header color breaks because the default style of the Link component loads again and replaces custom color set for header Link

Expected Behavior

Think it's obvious but just to fill in:
The ideal behavior is not to refetch Link component's styles when it's already loaded
Another bad but still better behavior would be to load it but not override custom styles of Link in header

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

Reproduction Live (stackblitz) Link

2022-11-14_1-53-18

To Reproduce

Explained enough in Describe the Bug section, together with the reproduction link it should be enough to reproduce

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions