reactjs - DOM 中不存在 react-emotion 的 CSS

Question

我用来react-emotion为我的一些 React 组件设置样式。我尝试使用服务器端启动的 Chromium 实例puppeteer（

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

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

谢谢你。

Answer 1

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

import { sheet } from 'emotion';

sheet.speedy(false);

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

Answer 2

您必须extractStatic在babel-plugin-emotion.

静态提取：

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

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

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