This is an example of integrating Vike with styled-components and grommet.
This was born out of the following discussions:
Special thanks to tdonhauser for initially digging into this.
Run it with:
pnpm install
pnpm run devFollow 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.