NextJS Link tag causes styling bugs with styled components

[AndyW22]

• [ x] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

With a client side transition using the nextjs Link component, the styles in various components have issues such as the transition css property not being applied and border-radius. Its fixed when you do a full reload, and doesnt happen with regular tags.

Expected Behavior 🤔

The styling looks the same as on a full reload

Steps to Reproduce 🕹

https://github.com/AndyW22/muissrbug

Steps:

1. yarn install && yarn build && yarn start

2. click on the Paper component and notice the differences in the styling between the component you just clicked on and the one that is now shown on a different page, they are the same component but have different styling.

This doesnt happen if you use an <a> tag, so the issue is to do with compatibility with the nextjs Link component. This didnt happen with v4.

I followed all the steps to add styled components, the bug might be due to not doing that correctly.

I also added a key to _app.tsx for the component rendering which should re-render the component on a page transition.

Your Environment 🌎

NextJS
Material UI V5
Typescript
Styled Components

[mnajdova]

Is it intentional that you have JSS too in the project? Also, in the link that you shared, you are using styled-components directly, so I am not sure how does it related to mui. Can you elaborate? Is this a styled-components issue? Is SSR not configured correctly?

[AndyW22]

Is it intentional that you have JSS too in the project? Also, in the link that you shared, you are using styled-components directly, so I am not sure how does it related to mui. Can you elaborate? Is this a styled-components issue? Is SSR not configured correctly?

Yes its intentional to use JSS, I am using styled components directly but that is using a styled MUI component (Paper component). without using an MUI component the bug doesnt happen.

I dont think this is a styled components issue as with MUI v4 there were no issues, but likely related to SSR config. I followed the guide to implement MUI with SSR + styled components, but either I missed something or the guide is incomplete or there is a bug with MUI.

[pedroeckel]

@AndyW22 Did you find any solution? I'm facing the same problem

[AndyW22]

@AndyW22 Did you find any solution? I'm facing the same problem

No, only "workaround" is using <a> tags instead which ofcourse loses all of the Link tag benefits.

[opolo]

We have same issue.... We should have waited with updating to MUI5 till NextJS was better tested x_x

[mnajdova]

No, only "workaround" is using tags instead which ofcourse loses all of the Link tag benefits.

@AndyW22 does it work using the Link component provided as part of the example project?

[AndyW22]

No, only "workaround" is using tags instead which ofcourse loses all of the Link tag benefits.

@AndyW22 does it work using the Link component provided as part of the example project?

@mnajdova The example doesnt use any styled components, all it does is setup compatibility (by adding the server styled sheet on _document.tsx) but doesnt use it. all the styles are just made by importing mui components into each react component.

I tried adding the CardContainer component from my example into the /about page, and the same issue occurs.

it would be helpful if the example repo provided examples on using styled components rather than just setting it up, it seems like actually using styled components hasnt been tested but rather just adding it to the project and compiling.

[mnajdova]

I am closing as a duplicate of #29742 I know that this is an older one, but more discussion happened there in the meantime. Please continue the discussion on the other issue.