使用 Storybook 进行 preact 演示和 webpack 捆绑 @emotion/core -> @emotion/cache -> @emotion/sheet ，它将样式插入到 iframe 标头中，导致样式出现多个 CSP 错误，如下所示
<head>
<style data-emotion>...</style>
<style data-emotion>...</style>
<style data-emotion>...</style>
<style data-emotion>...</style>
<style data-emotion>...</style>
...
</head>
我尝试检查以下文档 - https://emotion.sh/docs/cache-provider，https://www.npmjs.com/package/@emotion/sheet/v/10.0.0-really- unsafe-please-do-not-use.1?activeTab=dependents 传递随机数，但我们不在任何组件内创建 StyleSheet / createCache，但 webpack 将 package.json 中的所有依赖项捆绑为主题的一部分，并应用默认值选项（随机数 - 未定义）
我尝试将 CacheProvider 添加到全局故事书装饰器中，如下所示
// .storybook/preview.js
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import React from 'react';
const styleCache = createCache({
key: 'prefix',
nonce: 'nonce-id',
});
export const decorators = [
(Story) => (
<div id="cache-block">
<CacheProvider value={styleCache}>
<Story />
</CacheProvider>
</div>
),
];
我可以看到缓存块已渲染，但标头样式未使用随机数值进行更新。 如果我错过了这里的任何内容，或者如果有其他方法来传递情感风格的随机数，请告诉我！ 谢谢！
我修复了以下操作项目：
prependtrue<CacheProvider value={this.cache} prepend={true}> ... </CacheProvider>
"@情感/缓存": "^11.11.0", “@emotion/react”：“^11.11.4”，
我希望它可以帮助别人。祝一切顺利！