umi-next icon indicating copy to clipboard operation
umi-next copied to clipboard

support styled components ssr in npm run dev?

Open Caesar-APAX opened this issue 2 years ago • 1 comments

目前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()
    }

Caesar-APAX avatar May 14 '22 01:05 Caesar-APAX

Please support as next.js

Caesar-APAX avatar May 14 '22 01:05 Caesar-APAX