Edit

styled-components

Documentation about using Vike with styled-components.

💚

This page is maintained by the community and may contain outdated information — PR welcome to update or improve it.

If you are using vike-react you can use vike-react-styled-components for automatic integration.

The vike-react-styled-components extension requires vike-react.

Manual integration

When using styled-components, you need to collect the page's styles upon SSR:

• styled-components > Server Side Rendering
• Integration > CSS-in-JS

You can follow along on this tutorial (vite-plugin-ssr was the previous name of Vike) on how to add styled-components to your Vike app.

If you use vike-react, you can manually integrate styled-components by using:

• +onBeforeRenderHtml() hook
• API > +Wrapper
• +onAfterRenderHtml() hook

Examples:

• 2024.12 GitHub > phonzammi/vike-react-styled-components-example - Using vike-react
• 2024.04 GitHub > lourot/vike-react-styled-components-grommet
• 2024.04 GitHub > Pixelatex/vike-styled-ts
• 2023.10 GitHub > alexrabin/vite-ssr-styled-components

  vite-plugin-ssr was the previous name of Vike.

See also

• styled-components > Server Side Rendering
• Discussion #2662 - Can't use styled-components's DefaultTheme to set values
• Integration > CSS-in-JS
• Grommet