Styled components and SSR server side rendering and createGlobalStyle

Question

In the styled-components DOCs we get that:

Server Side Rendering v2+

styled-components supports concurrent server side rendering, with stylesheet rehydration. The basic idea is that everytime you render your app on the server, you can create a ServerStyleSheet and add a provider to your React tree, that accepts styles via a context API.

This doesn't interfere with global styles, such as keyframes or createGlobalStyle and allows you to use styled-components with React DOM's various SSR APIs.

What does it mean by "it doesn't interfere with createGlobalStyle"?

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

const sheet = new ServerStyleSheet();

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

Question

Will the global styles created with createGlobalStyle and inserted with <GlobalStyle/> be collected by the sheet.collectStyles() method?

Answer 1

Will the global styles created with createGlobalStyle and inserted with <GlobalStyle/> be collected by the sheet.collectStyles() method?

Yes!

WARNING: The CSS from <GlobalStyle/> might be inserted after other chunks of CSS so things like @font-face might break.

So far I only had problems with @font-face .