Edit this page

styled-components

Community-led documentation about using styled-components with Vike.

💚

This page may contain outdated information, PR welcome to update or improve this page.

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
• <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
• Integration > CSS-in-JS
• Grommet