问题标签 [styled-components]

对于styled-componentsReact，是否有任何替代方案

（使用嵌套条件选择器来确保所有动画在同一个 DOM，但不同的 z-index 级别正确运行/完成）？

（对不起标题长度。没有代表创建样式组件标签。）

我正在使用一个新库来创建 React 组件 Styled-Components。

我想通过 onClick 在我的组件上应用动画颤抖。

所以没有带有样式组件的 Style.css 表，所有 css 都是通过 javascript 应用的。表单已经应用了一个 css：

export class Form extends React.Component { // eslint-disable-line react/prefer-stateless-function

我也有一个组件 Tremble：

常量摇动 = 关键帧` 10%, 90% { transform: translate3d(-1px, 0, 0); }

关于这可能如何工作的任何线索？

我知道如何theme从使用以下方式创建的组件中获取styled：

但是如何从普通组件中获取或将其应用于不同的属性？例子：

index.js

main.js

注意没有调用需要主题的属性style

如何翻译涉及带有styled-components 的兄弟选择器的规则？（我认为它还涉及通过生成的类名的其他风格的样式）

处理样式组件中悬停的最佳方法是什么。我有一个包装元素，当悬停时会显示一个按钮。

我可以在组件上实现一些状态并在悬停时切换属性，但想知道是否有更好的方法来使用 styled-cmponents。

像下面这样的东西不起作用，但会是理想的：

我的应用程序中有一个 Button 组件，我想让它成为主题。为此，我创建了一个 ThemeableButton.js，我想使用 styled(Button) 覆盖 Button 组件。

我不使用内联样式，所以我的 Button 组件没有定义任何样式并且对样式组件一无所知。

我认为覆盖第 3 方组件可以完成这项工作，但它对我不起作用。我在这里创建了一个 webpackbin 示例。

我的问题出在 ThemeableButton.js 中。这里：

我期待它能够工作，覆盖我的 Button.js 组件并添加样式道具。当然，如果我这样定义 StyledButton

它有效，但想法是覆盖我的组件。我将拥有更复杂的组件，我不想使用样式构造函数来定义它们。

关于如何完成这项工作的任何想法？

谢谢！

我正在使用 styled-components 并尝试像这样设置背景图像

我也试过不带引号，就像这样

在这两种情况下，我得到相同的结果

http://localhost:3000/assets/image.png加载资源失败：服务器响应状态为 404（未找到）

我正在使用Richard Kall 的 react starter

该文件肯定在指定位置。

我加载不正确吗？

我应该提一下，我对此很陌生（React 和 styled-components）

我遇到以下错误说明（通过 iOS 测试）：

无法读取 null 的属性“getScrollableNode”

在尝试将 react-native 的Animated与侧面样式组件样式工具一起用于 react 和 react-native 时。

这是<Logo />我创建的组件的示例：

然后，我将此组件导入我想要对其应用动画的场景之一：

这会导致上面提到的错误，尝试用谷歌搜索它并找不到任何解释它是什么。如有必要，请随时索取更多详细信息。

相关 GitHub 问题： https ://github.com/styled-components/styled-components/issues/341

我们正在尝试从 styled-components 项目中找出以下问题的原因：https ://github.com/styled-components/styled-components/issues/389

对 refs + setNativeProps 进行了一些更改，这些更改在一处破坏了动画，假设是因为某些动画相关信息没有正确传递。

因此，要了解如何createAnimatedComponent更改初始组件的问题，添加了什么？如果没有正确传递，什么会导致动画中断？

如果您知道可能导致此问题的原因，请提供想法/详细答案。

更新与该问题相关的重大更改发生在此文件中的 某处以供参考innerRef传递下来ref，isTag函数检查它是否是本机组件。

我正在尝试构建一个 React 组件来处理淡入和淡出。在下面的代码中，如果我out作为道具传递给组件，它会在动画出来之前显示为隐藏。我试图让它默认淡入，然后在我传入out道具时淡出。有人看到这个问题的解决方案吗？

WebpackBin 运行示例