DOM 中没有 react-emotion 的 CSS

Question

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

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

有什么方法可以通过样式元素 "render" 将 CSS 直接变成 DOM 吗？

谢谢。

Answer 1

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

Static Extraction:

Generated CSS that is eligible for extraction can be moved to an external css file.

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

Answer 2

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

import { sheet } from 'emotion';

sheet.speedy(false);

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

Answer 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>
  )
}

DOM 中没有 react-emotion 的 CSS

react-emotion's CSS not present in DOM

emotion

reactjs

puppeteer