ReactJS-拒绝应用内联样式，因为它违反了以下内容安全策略指令

问题描述

在生产环境中加载ReactJS项目时，在浏览器检查器（Chrome，Brave，Safari）中出现以下错误：

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem 'self' https://fonts.googleapis.com". Either the 'unsafe-inline' keyword,a hash ('sha256-TMIFk5ZjGNpczjRE6YVaBrPXVNzANj9JRK+w2bh9TX8='),or a nonce ('nonce-...') is required to enable inline execution.

我使用以下命令来构建ReactJS项目（它解决了内联脚本问题，但没有内联样式）：

INLINE_RUNTIME_CHUNK=false npm run build

这是CSP政策部分，涉及以下样式：

Header set Content-Security-Policy "default-src 'self'; style-src 'self'; style-src-elem 'self' https://fonts.googleapis.com; ..."

我相信问题是在构建阶段发生的，当React生成块文件（名称如' 2.3c013fe3.chunk.js '）并将内联样式嵌入代码中时，尽管我没有在我的源代码中的任何地方都不能使用内联样式。所有样式都包含在fileX.module.css中，并导入到tsx文件中，例如以下示例：

Example.tsx

import styles from './Example.module.css';

const Example = () => (
    <div className={styles.container}>
        Hello world
    </div>
);

Example.module.css

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

如果自动生成的块文件是问题，我看不到如何使用 hash 或 nonce 替代方案解决此问题，因为React会始终生成这些内联样式。另一方面，我认为 unsafe-inline 不是一个选择，因为这实际上会使CSP失去作用。

对CSP指令或React设置有任何解决此问题的建议吗？ （我阅读了所有类似的问答，但没有一个涉及到React的特定问题）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）