umi-next
umi-next copied to clipboard
support styled components ssr in npm run dev?
目前umi3, umi4支持styled components CSR客户端渲染,没有支持到服务端直出.
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
{sheet.collectStyles(
<StyleSheetManager>
<App {...props} />
</StyleSheetManager>
)}
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = async () =>
originalRenderPage({
enhanceApp: (App) => withResponsiveContext(App, sheet, ctx.req)
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
// see https://github.com/nfl/react-helmet#server-usage for more information
// 'head' was occupied by 'renderPage().head', we cannot use it
helmet: Helmet.renderStatic()
}
} finally {
sheet.seal()
}
Please support as next.js