样式化的组件以及SSR服务器端呈现和createGlobalStyle

Question

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

  

服务器端渲染v2 +

     

styled-components支持样式表补水的并发服务器端渲染。基本思想是，每次在服务器上呈现应用程序时，您都可以创建一个ServerStyleSheet并将其添加到React树中，以通过上下文API接受样式。

     

这不会干扰，例如关键帧或 createGlobalStyle 等全局样式，并允许您将样式化组件与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()插入的全局样式吗？

Answer 1

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

是的！

警告：来自<GlobalStyle/>的CSS可能会插入到其他CSS块之后，因此@font-face之类的东西可能会损坏。

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