我有一个用CRA创建的React应用程序，我使用CSS模块来设计组件的样式。
我创建了前缀为.module.css的CSS文件。示例：ComponentName.module.css
然后，我将CSS文件导入到组件中，我想像这样使用它：
import styles from "./css/ComponentName.module.css";
最后，我使用className属性应用样式：

const welcomeText = (
    <div className={styles["welcome-text"]}>
        <h1 className={styles.title}>Welcome</h1>
    </div>
);

但是，通过使用CSP并将style-src指令设置为'self'，所有样式都被阻止。我还必须添加'unsafe inline'才能工作。
是否有一种方法可以将.module.css文件及其与className的用法定义为style-src指令的有效源？如果没有，还有什么其他的样式化React组件的方法也可以与style-src 'self'兼容，而不需要'unsafe-inline'？样式化组件是否有效？
或者使用unsafe-inline来样式化CSS模块组件是安全的吗？
谢谢你！
我试着在Google上寻找如何使CSS模块与CSP兼容的答案，但我没有找到任何答案。
编辑：我想使用的CSP配置如下

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self' http://localhost:8090
img-src data: https: http:;
script-src 'self';
font-src 'self' https://fonts.gstatic.com;
style-src 'self' https://fonts.googleapis.com;"/>

然而，当加载页面时，所有的CSS都消失了，控制台多次记录这些错误：

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). styleTagTransform.js:12
 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). insertBySelector.js:36

为了消 debugging 误并使应用的CSS工作，必须添加unsafe-inline：

style-src 'self' https://fonts.googleapis.com 'unsafe-inline';"