使用CSS-in-JS库时，Tauri中正确的CSP配置方法是什么？

你的问题出在当前的CSP配置"default-src 'self'"过于严格，完全限制了styled-components这类CSS-in-JS库必需的内联样式、动态代码执行权限，这直接导致Release构建下页面无法渲染。

直接可用的CSP配置 #

修改tauri.conf.json中的CSP规则为：

"csp": "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';"

配置细节说明 #

• style-src 'self' 'unsafe-inline'：styled-components会动态生成内联<style>标签，这条规则在允许加载本地样式资源的同时，放行这类内联样式
• script-src 'self' 'unsafe-inline' 'unsafe-eval'：部分CSS-in-JS的动态逻辑依赖eval执行，这条规则确保相关脚本可以正常运行

如果测试后发现不需要unsafe-eval也能正常工作，可以移除该选项以进一步收紧规则，但多数场景下styled-components需要这个权限才能正常运行。

修改配置后重新打包Release版本，页面即可正常渲染。

内容的提问来源于stack exchange，提问作者Nane