样式化组件和 SSR 服务器端渲染和 createGlobalStyle答案

【问题标题】：Styled components and SSR server side rendering and createGlobalStyle样式化组件和 SSR 服务器端渲染和 createGlobalStyle
【发布时间】：2020-02-26 14:40:41
【问题描述】：

在styled-components DOC 中，我们得到：

服务器端渲染 v2+

styled-components 支持并发服务器端渲染，带有样式表再水化。基本思想是，每次在服务器上渲染应用程序时，您都可以创建一个 ServerStyleSheet 并向您的 React 树添加一个提供程序，该提供程序通过上下文 API 接受样式。

这不会干扰全局样式，例如关键帧或 createGlobalStyle，并允许您将 styled-components 与 React DOM 的各种 SSR API 一起使用。

“它不干扰 createGlobalStyle”是什么意思？

const GlobalStyle = createGlobalStyle`
  ${resetCSS}
  ${baseCSS}
`;

const sheet = new ServerStyleSheet();

const body = renderToString(sheet.collectStyles(
  <Router>
    <GlobalStyle/>
    <Header/>
    <Main/>
    <Footer/>
  </Router>
));

问题

使用createGlobalStyle 创建并使用<GlobalStyle/> 插入的全局样式是否会被sheet.collectStyles() 方法收集？

【问题讨论】：

标签： javascript css reactjs styled-components server-side-rendering

【解决方案1】：

使用createGlobalStyle 创建并使用<GlobalStyle/> 插入的全局样式是否会被sheet.collectStyles() 方法收集？

是的！

警告：来自<GlobalStyle/> 的CSS 可能会插入到其他CSS 块之后，因此@font-face 之类的内容可能会中断。

到目前为止，我只遇到过@font-face 的问题。

【讨论】：