Question

我正在按照本指南https://emotion.sh/docs/migrating-to-emotion-10

从React Emotion 9迁移到Emotion 10。

默认情况下，它应该启用SSR，但是，它似乎不适用于情感主题，因为我无法访问样式化组件中的“ props.theme”。但是，样式化的组件可以在以情感为主题的客户端上按预期工作。

可能的原因是什么？

使用标准代码

const App = (theme) => (
    <ThemeProvider theme={theme}>
        ...
    </ThemeProvider>
);

const app = <App theme={theme} />
const html = renderToString(app);

一些错误日志：

at handleInterpolation (webpack:///./node_modules/@emotion/serialize/dist/serialize.esm.js?:143:24)
    at serializeStyles (webpack:///./node_modules/@emotion/serialize/dist/serialize.esm.js?:253:15)
    at Object.eval [as children] (webpack:///./node_modules/@emotion/styled-base/dist/styled-base.esm.js?:114:100)
    at ReactDOMServerRenderer.render (/www/sites/base_web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3412:55)
    at ReactDOMServerRenderer.read (/www/sites/base_web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at renderToString (/www/sites/base_web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)

Answer 1

  import { renderToString } from 'react-dom/server'
  import { renderStylesToString } from 'emotion-server'
  import App from './App'

  const html = renderStylesToString(renderToString(<App />))

这项工作吗？

在服务器端渲染期间反应情绪主题不起作用

1 个答案: