egg-view-react-ssr icon indicating copy to clipboard operation
egg-view-react-ssr copied to clipboard

有考虑增加在server端支持styled-component的同构

Open ghost opened this issue 5 years ago • 0 comments

一直在使用easywebpack,项目有场景在运行时对样式的操作/变量的传值,需要使用styled-component,但在server端进行renderToString收集好component的样式表,append进

import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(sheet.collectStyles(<YourApp />))
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}

ghost avatar Aug 05 '20 13:08 ghost