lourot / vike-react-styled-components-grommet

🔨 Vike + styled-components + grommet example

Vike + styled-components + grommet example

This is an example of integrating Vike with styled-components and grommet.

This was born out of the following discussions:

• vikejs/vike#1217
• tdonhauser/vite-ssr-styled-components-grommet#1
• grommet/grommet#6976

Special thanks to tdonhauser for initially digging into this.

Run it with:

pnpm install
pnpm run dev

Follow the initial commits in this repo one by one in order to understand how this is built:

• First, an empty vike-react project was scaffolded using Bati.
• Then, in order to be able to modify onRenderHtml(), which is encapsulated in vike-react, we copied it in this repository. This process is called "ejecting" onRenderHtml().
• We then added styled-components to the project, which required to extend onRenderHtml().
• Finally added grommet.

As you can see, server-side rendering works: the initial HTML delivered by onRenderHtml() contains the styles of the styled-components and grommet components and we don't experience any FOUC.