DOM 中不存在 react-emotion 的 CSS答案

【问题标题】：react-emotion's CSS not present in DOMDOM 中不存在 react-emotion 的 CSS
【发布时间】：2018-07-25 11:54:49
【问题描述】：

我使用react-emotion 来设置我的一些 React 组件的样式。我尝试使用服务器端启动的 Chromium 实例 (puppeteer) 预呈现我的页面，获取新构建的网站并将其 HTML 作为字符串检索，以将其保存在自己的专用 HTML 文件中。

但是，react-emotion 生成的每个 CSS 都不会被获取。我自己查找了 HTML（使用真正的 Chrome 实例），但它不存在。但是组件的样式都正确。在使用 DevTools 查看样式定义时，我可以看到每个样式定义都以斜体显示。这是什么意思？

有没有办法通过样式元素将 CSS 直接“渲染”到 DOM 中？

谢谢。

【问题讨论】：

标签： reactjs puppeteer emotion

【解决方案1】：

目前是 Chrome 的问题。 Emotion 使用了某种 Chrome 魔法，因此它不需要将其 CSS 渲染到 DOM。您可以在使用任何情绪之前调用这段小代码来强制 DOM 渲染（性能损失）。

import { sheet } from 'emotion';

sheet.speedy(false);

ReactDOM.render(<App />, myMountPoint);

【讨论】：

你如何使用@emotion v10 做到这一点？
我还没有使用 v10。 :(

【解决方案2】：

你必须在babel-plugin-emotion中设置extractStatic。

静态提取：

生成的符合提取条件的 CSS 可以移动到外部 css 文件。

{
  "plugins": [
    [
      "emotion",
      {
        "extractStatic": true
      }
    ]
  ]
}

【讨论】：

它是半工作的，但我在情绪文档中读过它，似乎不推荐。你有这方面的经验吗？
"如果你想使用动态值，你必须使用 css 变量。" -> 似乎是我的问题。 ://
不幸的是，该选项已被删除，请在此处阅读有关动机：github.com/emotion-js/emotion/blob/master/docs/…

【解决方案3】：

对于情感 v11，

import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

// if you are using mui v5
import { ThemeProvider } from '@mui/material/styles';

const emotionCache = createCache({
  key: "emotion-cache-no-speedy",
  speedy: false,
});

const theme = createTheme();

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CacheProvider value={emotionCache}>
        <div>Your app here</div>
      </CacheProvider>
    </ThemeProvider>
  )
}

【讨论】：