带样式的组件和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有问题。