forked from vercel/next.js
/
root-style-registry.client.js
41 lines (35 loc) · 1.27 KB
/
root-style-registry.client.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from 'react'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
import { useFlushEffects } from 'next/dist/client/components/hooks-client'
import { useState } from 'react'
export default function RootStyleRegistry({ children }) {
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
const styledJsxFlushEffect = () => {
const styles = jsxStyleRegistry.styles()
jsxStyleRegistry.flush()
return <>{styles}</>
}
const styledComponentsFlushEffect = () => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.seal()
return <>{styles}</>
}
// Allow multiple useFlushEffects
useFlushEffects(() => {
return <>{styledJsxFlushEffect()}</>
})
useFlushEffects(() => {
return <>{styledComponentsFlushEffect()}</>
})
// Only include style registry on server side for SSR
if (typeof window === 'undefined') {
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
<StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
</StyleSheetManager>
)
}
return children
}