文章/答案/技术大牛

发布

社区首页 >问答首页 >样式-组件:担心FOUC

问样式-组件:担心FOUC
EN

Stack Overflow用户

提问于 2017-03-12 08:17:52

回答 2查看 1.9K关注 0票数 2

我已经进入了造型-部件包，我认为对开发人员的友好是很棒的！

然而，我担心的是一件事：闪存的非样式内容。

因为在生产和开发中，样式都是用javascript块打包的；当加载组件时，样式将生成并追加(在<head>的底部)。

这与CSS模块的工作方式本质上是一样的。

参考surviveJS的一篇文章，我学会了在生产构建步骤中使用ExtractTextPlugin创建单独的样式表(css文件)。

然而，在styled-components中，CSS只是JS，所以我们不能使用这种技术(至少，我无法让它工作)。

所以，在我开始用样式组件构建我的下一个项目之前，有人能消除我的担忧吗？

webpack

styled-components

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-13 06:14:01

如果你不想有你的UI闪存-你需要从服务器发送你的样式，而不是使用JS呈现。幸运的是，styled-componnets库支持服务器呈现API，尽管它目前并不公开。

您可以在服务器上预呈现样式，并将其插入到您从服务器发送的初始html中，因此它将包含CSS，UI不会闪烁。

正如我提到的，API还不是公开的，但是您可以使用它。关于这个问题，有很多次讨论，请查看：这、这和更多问题。我想公共API应该已经在v2版本中准备好了。

因此，使用styled-components来防止闪烁基本上是没有问题的。

票数 1

Stack Overflow用户

发布于 2017-03-13 06:41:10

v2即将推出，你今天就可以开始使用它了。下面是一个如何做到这一点的例子。

https://github.com/styled-components/styled-components/blob/v2/example/ssr.js

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42745238

复制

相似问题

问样式-组件:担心FOUC
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式-组件:担心FOUCEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问样式-组件:担心FOUC
EN