如何在使用样式组件渲染服务器端的同时注入全局样式

Question

我无法从documentation中找出这一点。

我想通过styled-components向我的服务器端渲染React应用程序添加一些全局样式 - 但我无法弄清楚如何做到这一点。

这里是部分我globalStyles.js：

import { injectGlobal } from 'styled-components'; 

export default() => injectGlobal` 
    @import url('https://fonts.googleapis.com/css?family=Pacifico'); 
    @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400'); 
    html { 
     box-sizing: border-box; 
    } 
    *, *:before, *:after { 
     box-sizing: inherit; 
    } 
`; 

这里是我的通用渲染快递处理程序：

const path = require('path'); 
const fs = require('fs'); 

const React = require('react'); 
const { renderToString } = require('react-dom/server'); 
const { StaticRouter } = require('react-router-dom'); 
const { ServerStyleSheet } = require('styled-components'); 

const { default: App } = require('../src/containers/App'); 
const baseStyles = require('../src/styles'); // How to get this in the global css 

const indexFile = fs.readFileSync(path.resolve(__dirname, '..', 'build', 'index.html'), 'utf8'); 

function universalLoader(req, res) { 
    const css = new ServerStyleSheet(); 
    const context = {}; 

    baseStyles(); 

    // Create the markup from the React application 
    const markup = renderToString(
     css.collectStyles(
      <StaticRouter context={context} location={req.url}> 
       <App /> 
      </StaticRouter> 
     ) 
    ); 

    const html = indexFile 
     .replace('{{SSR}}', markup) 
     .replace('{{CSS}}', css.getStyleTags()); 

    // Send the response back to the user 
    res.send(html); 
}; 

Answer 1

原来，在我<App />组件render()调用baseStyles()（这又是哪位injectGlobal）方法解决了这个问题。 :)