`styled-jsx`

You can use Vike with styled-jsx.

Example:

2023.07 GitHub > jeremypress/vite-ssr-styled-jsx

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

To use Vike with styled-jsx:

Install:
```
npm install styled-jsx
```

Add styled-jsx to vite.config.js:

// vite.config.js
 
import react from '@vitejs/plugin-react'
import vike from 'vike/plugin'
 
export default {
  plugins: [react({ babel: { plugins: ['styled-jsx/babel'] } }), vike()]
}

Collect and inject styles.

When using a CSS-in-JS tool, like styled-jsx, you always need to collect the page's styles upon SSR in order to avoid FOUC.

If you use vike-react/vike-vue/vike-solid, then see Tool Integration > CSS-in-JS.

// /renderer/+onRenderHtml.js
 
export { onRenderHtml }
 
import React from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import { escapeInject, dangerouslySkipEscape } from 'vike/server'
import { Layout } from './Layout'
import { createStyleRegistry, StyleRegistry } from 'styled-jsx'
 
const registry = createStyleRegistry()
 
async function onRenderHtml(pageContext) {
  // flush styles to support the possibility of concurrent rendering
  registry.flush()
 
  const { Page } = pageContext
  // include the styleregistry in the app render to inject the styles
  const viewHtml = dangerouslySkipEscape(
    renderToString(
      <StyleRegistry registry={registry}>
        <Layout>
          <Page />
        </Layout>
      </StyleRegistry>
    )
  )
 
  // extract the styles to add as head tags to the server markup
  const headTags = renderToStaticMarkup(<>{registry.styles()}</>)
 
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        ${dangerouslySkipEscape(headTags)}
      </head>
      <body>
        <div id="page-view">${viewHtml}</div>
      </body>
    </html>`
}

styled-jsx

See also

`styled-jsx`