Unable to collect styled-component styleTags with server-side rendering

67 views Asked by At

I try to collect the styleTags of a grommet.io page in order to use them for server-side-rendering with client hydration. I use ServerStyleSheet() as described here:

https://styled-components.com/docs/advanced#server-side-rendering

The problem is, that there are no styles collected with grommet components used. If I use other components and apply styled-components to it, it works just fine. I setup a simple example:

https://github.com/der1igedon/vite-ssr-styled-components-grommet/tree/main/

The styles should be collected on the server side (see renderer/_default.page.server.tsx) and injected in the -Tag of the documentHtml. Unfortunately there are no styles detected. See console.log("Found styles: ", sheet.getStyleTags());

I guess the question in this post is related to the same problem I have and not solved so far: collectStyles not getting styles from Root App Component in styled-components SSR

Would be nice if anyone can help! Thanks!

0

There are 0 answers