如何在使用样式组件渲染服务器端时注入全局样式
How to inject global styles while rendering server-side with styled-components
我无法从 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;
}
`;
这是我的通用渲染 express-handler:
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);
};
事实证明,在我的 <App />
组件 render()
方法中调用 baseStyles()
(进而调用 injectGlobal
)解决了问题。 :)
我无法从 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;
}
`;
这是我的通用渲染 express-handler:
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);
};
事实证明,在我的 <App />
组件 render()
方法中调用 baseStyles()
(进而调用 injectGlobal
)解决了问题。 :)