问题标签 [styled-components]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
styled-components - 父母如何以样式组件的方式将压倒一切的样式规则传递给孩子？
我有一个 Button 和几个其他版本的按钮，它们希望重用 Button 但会覆盖一些特定规则。如宽度、高度、颜色或悬停状态颜色等。
这是否可能无需手动将每个属性作为道具传递？
这是 webpackbin 中的示例http://www.webpackbin.com/VyjrMGJ9f
javascript - React Styled Components - 如何访问原始 html
我在我的应用程序中转换为样式化组件的组件上有一个 ref。ref 用于访问组件原始 html 元素上的 offsetHeight 和 scrollHeight 属性。一旦我将此组件切换为样式化组件，ref 现在指向样式化组件而不是原始 html 元素，我不确定如何引用基本元素。这可以做到吗？
例子：
css - 使用带有样式组件的 ReactCSSTransitionGroup
我正在使用样式组件而不是传统的 css 方式。但我不知道它如何与ReactCSSTransitionGroup一起工作。
基本上，ReactCSSTransitionGroup在 css 资源中查找某些类名，然后在其整个生命周期中应用于组件。但是，styled-components没有任何类名，样式直接应用于组件。
我知道我可以选择不使用ReactCSSTransitionGroup，因为这两种技术看起来不兼容。但是当我只使用时styled-components，似乎在卸载组件时我无法渲染任何动画 - 它是纯 css，无法访问组件的生命周期。
任何帮助或建议表示赞赏。
styled-components - 带有@font-face 的隔离样式组件
我正在使用https://github.com/styled-components/styled-components。
我正在尝试为需要@font-face. 我想确保每个组件都独立于它的上下文，所以我在每个组件上定义font-family样式。但是如果我injectGlobal在多个组件中使用，我会@font-face为同一种字体获得多个规则。
我是否应该在我的入口点组件中定义@font-face规则ThemeProvider并接受浏览器可能不会加载所需字体的事实？
reactjs - styled-components：担心 FOUC
我一直在使用styled-components包，我认为对开发人员的友好性很棒！
但是，我担心一件事：Flash Of Unstyled Content。
由于在生产和开发中，样式与 javascript 块一起打包；加载组件时，会生成样式并附加到<head>.
这本质上与 CSS 模块的工作方式相同。
参考survivalJS 的一篇文章，我学会了在生产构建步骤中使用ExtractTextPlugin创建单独的样式表（css 文件）。
然而，在styled-componentsCSS 中只是 JS，所以我们不能使用这种技术（至少，我无法让它工作）。
因此，在我开始使用 styled-components 构建下一个项目之前，有人可以打消我的顾虑吗？
reactjs - 样式化组件中的动态主题
我在我的 React 应用程序中使用 styled-components 并希望使用动态主题。有些区域会使用我的深色主题，有些会使用浅色。因为样式化的组件必须在使用它们的组件之外声明，我们如何动态地传递主题？
css - 通用渲染在 DOMContentLoaded 事件和 Load 事件之间产生延迟
我对样式化组件感到非常兴奋，如果不是因为这个，我很想使用它……
我已经准备了两个使用 next.js 通用渲染库的示例项目。
第一个示例使用 styled-components 作为解决方案，第二个示例使用他们的默认 css 解决方案 styled-jsx。
这两个示例都包含完全相同的代码，但复杂性最低。正如您很快就会看到的那样 - 在 styled-components 示例中，在 DOMContentLoaded 事件和 Load 事件之间存在令人不安的延迟，在该事件中用户实际上看到了未设置样式的 html 标记，而在第二个示例中使用 styled-jsx 这不是案子。
两个演示现在都使用 Zeit 在线托管：
1 - https://01-styled-components-sqprkdqeft.now.sh
2 - https://02-styled-jsx-nhrynpsdox.now.sh
github 上提供的源代码：
1 - https://github.com/Ajar-Ajar/next-demo--styled-components
2 - https://github.com/Ajar-Ajar/next-demo--styled-jsx
我非常感谢任何关于为什么它发生在一个而不是另一个的见解，当然还有任何修改这种行为的方法，因为我喜欢使用 styled-components 的许多特性和优势。
谢谢
Ajar
:)
styled-components - 样式组件 - 为什么道具位置会影响样式？
我正在使用 styled-components 为组件中的父元素和子元素设置样式：
我有一个light真/假的道具 - 但我在根据该属性的值设置元素样式时遇到问题：
仅当我删除单独传递给函数的道具时，样式似乎才起作用。
Parent在以下情况下，元素会根据lightprop 值使用正确的样式：
Parent在以下情况下，元素不会根据lightprop 值使用正确的样式：
我可以通过在ParentandChild组件上设置 prop 来完成所有工作，但这似乎不是最好的方法：
这是基于道具将样式应用于组件的正确方法，还是我的方法有问题？
如果有帮助，我有一个演示可以修改： https ://www.webpackbin.com/bins/-Kfcsujw99cjU7ttqgTz
css - 样式化组件组织
我想在我的应用程序中使用样式组件，我想知道如何组织它。
基本上，样式组件被分配给特定组件以实现可重用性。
但是我想在其他组件（例如动画组件）中多次使用的样式组件呢？我应该创建一个文件来保存这些“全局”样式组件并将其导入到许多组件中吗？
这是好习惯吗？
javascript - 将样式化组件作为道具传递给反应
我正在为我的所有样式使用 styled-components，并且想知道如何将样式从我的父组件 footer.jsx 传递到我的可重用子组件联系人作为道具。
我尝试了几种不同的方法，将一个字符串作为道具传递，然后将其传递给一个样式化的组件以进行更新，background-image{this.props.icon}但这不起作用，而且我尝试过的当前方式也没有渲染任何东西.
https://www.webpackbin.com/bins/-Kg0-scl1gRf4UTOaK-Y
页脚.jsx
联系方式.jsx
}