样式化的组件在开发和生产模式中都能很好地工作。生成类名,应用样式,所以用户方面没有问题:
但是,当我单击上面突出显示的<style>
时,它会将我带到空的<style data-styled="active" data-styled-version="5.3.0"></style>
元素。
我试着设置Break on
-> subtree modifications
,我试着设置一个观察者(我猜中断功能使用它),没有运气,样式元素总是空的,没有修改(* 在生产中),但是,不知何故,应用到页面。(我使用延迟加载,所以样式不会立即应用)。
同时,在开发模式下,该元素不是空的,观察者可以正确地捕获对样式元素的任何修改,包括添加/删除textNode。
我读了文档,我搜索了任何不同配置生产的可能性,但到目前为止还没有找到任何东西。我看到了这个:react styled components not working in production,但样式化在生产环境中确实有效。我也看到了这个:https://github.com/styled-components/styled-components/issues/2911,但我不使用全局样式(带styled)。我从webpack配置中删除了几乎所有的isDevelopment
条件,所以它们在文件加载器方面是完全相同的。
只是回答可能的“为什么你需要它被填充,如果应用到页面无论如何”-问题-我需要它。我正在使用一些样式隔离的shadow-dom实现,因此我正在观察styled-style元素的修改,以便将所需的修改复制到shadow-dom。它在开发中工作得很好,但在生产中却不行。
有什么想法吗?目前正在寻找用styled-jsx替换styled-components,但效果不太好。
1条答案
按热度按时间o7jaxewo1#
在生产模式下,Styled-Components使用CSSOM API将样式注入到样式标记中,这些样式在开发工具的Elements面板中不可见,可以通过以下方式读取:
document.querySelector('style[data-styled="active"]').sheet.cssRules
源