AppDir style override every time new components load

[ErAz7]

Verify canary release

• [X] 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

To Reproduce

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

[timneutkens]

Just had a look at this and it seems to me that the behavior is correct, the reason it ends up overriding styles is that you're putting two different css module classes on the <Link> whereas the CSS set on a component using CSS modules has to be unique/non-conflicting otherwise you'll end up with loading-order issues. Will double check with the team though.

[ErAz7]

Thank you for checking @timneutkens if I understood correctly, you mean I should not add custom style to Link component on header? but if so, then how can we handle customization of component styles when I have a component with some default styles but in a specific use case I need to override some of those

[ErAz7]

with the current approach, when I use a component as a server-component, the component is not downloaded by client but its styles are injected (which is inevitible) but when later for example user navigates to another paget that exact same component is used, the styles are loaded again

I think the reason we dont have this issue in normal situation (before server components), is because a website loads components that it needs only once and together with its styles so there's no repeated-style-loading but with server-components aproach, styles are loaded again when the component is reused

[balazsorban44]

Please refrain from tagging core maintainers to gain visibility. 💚

[ErAz7]

sure, my bad!

[gnoff]

@timneutkens @shuding I think the issue is the href has a ts query param which makes the style keys unique and thus a second fetch happens. I'm curious if that is necessary for some functional purpose. the href should ideally not depend on any runtime considerations

[ErAz7]

I think the issue is the href has a ...

~~does that mean this problem/behavior only happens with Link component?~~ Just happened for another component while completing the project, seems not to be related to specific components

[ErAz7]

Thanks @shuding is this supposed to fix this issue? because I tested on the stackblitz shared above and there was no improvement regarding this bug. Maybe not published to npm yet? tested on 13.0.5-canary.3

[shuding]

@ErAz7 It's not released yet (canary.3 was before that commit: https://github.com/vercel/next.js/commits/canary), I think a new one will be out today.

[ErAz7]

got it, thanks

[ErAz7]

Confirm the fix by @shuding resolves the problem

[ErAz7]

The problem still persists in some cases @shuding Here in this screenshot, I have a general Modal component and a PriceModal component Modal sets grid to 1fr 1fr but since PriceModal needs 3 columns, it sets grid to 1fr 1fr 1fr. Basically everything should work just fine but again the class/style of Modal loads 2 times and the second one orverrides the styles from PriceModal

OS: Linux Browser: Chrome Next: 13.0.7-canary.4

[ErAz7]

Also happens for header link:

you see the exact same classname and styles are repeated 4 times

[ErAz7]

this whole issue may be related to https://github.com/vercel/next.js/issues/20203

[shuding]

The bug should be fixed with #44938

[github-actions[bot]]

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