Javascript 情感+；盖茨比发球：除非刷新，否则不会加载主题

我的问题似乎孤立于将

@emotion/react

中的

css

和

与
@emotion/styled
中的
主题相结合的组件。最初，许多零部件加载时未设置样式，但在浏览器刷新后会弹出样式

每个组件看起来像

components
|- AppBar
  |- AppBar.jsx // exports UnstyledAppBar functional React component
  |- styles.js // exports styles() which uses props.theme and returns css`...`
  |- index.js // exports withTheme(styled(UnstyledAppBar)`${styles}`), i.e. a styled component with theme injected

此外，在首次加载时无法工作的样式是从主题道具派生的样式

换句话说

// styles.js
const styles = (props) => {
  const { theme } = props;

  return css`
    margin-left: 24px;
    margin-right: ${spacingSizeMedium}; // evaluates to 24px
  `;
}

marginleft
样式立即呈现，但
marginright
需要刷新

这个问题并没有出现在盖茨比开发模式中，而是发生在盖茨比构建中

相关包

"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"gatsby-plugin-emotion": "^6.0.0",

对我来说，似乎需要在
@emotion
中添加一些SSR（Sserver-SideRending）。你有没有试过这样的方法：

import { cache } from '@emotion/css'; 
import { CacheProvider } from '@emotion/react';

export const wrapRootElement = ({ element }) => {
  return <CacheProvider value={cache}>{element}</CacheProvider>;
};

从'@emotion/css'导入{cache}；
从'@emotion/react'导入{CacheProvider}；
导出常量wraproteElement=（{element}）=>{
返回{element}；
};

来源：
这绝对是正确的方向。我还没把它修好，但我修好后会回来的。请记住，在处理
wraprotement
（或
wrapageelement
）时，您需要同时更改
gatsby ssr.js
和
gatsby browser.js