		@@ -123,2 +123,6 @@ # styled-jsx

		## Using in Next.js

		Next.js automatically configures `styled-jsx` with babel or swc, you don't have to configure it manually.

		## How It Works
		@@ -338,2 +342,9 @@

		`styled-jsx` v5 introduced `StyledRegistry` component and `useStyleRegistry` hook to let you scope styles rendering in each SSR render to keep concurrent-safe.

		- `registry.styles()` will return the array of react components for style tags.
		- `registry.flush()` can clean the existing styles in the registry, it's optional for SSR when you have a standalone registry for each SSR render.

		> Next.js 12 integrates with `styled-jsx` v5 and manages the registry for you.

		```jsx
		@@ -348,3 +359,2 @@ import React from 'react'
		const styles = registry.styles()
		registry.flush()
		return <>{styles}</>
		@@ -371,2 +381,19 @@ }

		There's also a new API `createStyleRegistry` that is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).

		```js
		const registry = createStyleRegistry()
		const styles = registry.styles() // access styles

		function Page() {
		return (
		<StyleRegistry registry={registry}>
		<App />
		</StyleRegistry>
		)
		}
		```

		By default `<StyleRegistry />` will use the `registry` from root top `StyleRegistry`, which means there's only one `registry` in the react tree.

		It's paramount that you use one of these two functions so that
		@@ -373,0 +400,0 @@ the generated styles can be diffed when the client loads and

styled-jsx - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics