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

Question

在 styled-components DOC 中我们得到：

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.

“它不干扰 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

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

是的！

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

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

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

Styled components and SSR server side rendering and createGlobalStyle

javascript

css

reactjs

server-side-rendering

styled-components