Styled Component is not applied when navigating with View Transition

[nojaf]

Astro Info

Astro                    v4.8.2
Node                     v18.18.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

A styled component (via React client:only) will only render correctly if it is on the initial page load. When navigating via a View Transition the style will not be applied.

What's the expected result?

The style is always applied after each page transition.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wut9d2?file=src%2Fpages%2Fanother.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[martrapp]

Hi @nojaf, it looks like @emotion/styled is not working with <ViewTransitions />.

You need to find a way to update the lib's internal state after view transitions. I skimmed through @emotion/* but didn't find an obvious way how to do that.

For more information see https://docs.astro.build/en/guides/view-transitions/#script-behavior-with-view-transitions

[matthewp]

This seems to do the job: https://stackblitz.com/edit/github-wut9d2-fnekpm?file=src%2Fcomponents%2FButton.jsx,src%2Flayouts%2FLayout.astro,src%2Fpages%2Fanother.astro

[nojaf]

Thanks a bunch for this solution!