问题标签 [styled-components]

我在 React 中有以下组件：

它只是用库Styled-components渲染一个组件。它基本上显示了一个+迹象。

但是，我想分别旋转每条线，使用：

而且效果很好，但不幸的是没有过渡（它会立即发生）。尝试在这些行中的每一行中包含转换，但它仍然不影响更改。

我尝试过的另一个解决方案是添加一个类，例如rotated：

但是样式化的组件实际上并没有提供仅使用其逻辑来动态更改类的可能性。

期待任何形式的帮助，谢谢。

我是学习 React 的新手。作为我学习的下一个阶段，我需要学习如何设置 React 样式。根据以前的经验，我需要采取的步骤来设置我的 React 应用程序的样式：

1. 添加重置 CSS
2. 实施网格系统
3. 为（按钮、标题）等项目实现通用样式
4. 为每个组件实现特定样式

在 React 世界中，要找到一个很好的起点来解决上述问题是一项挑战，所以我希望有人能给我指出正确的方向。

对于上面列出的所有 4 个项目，样式化组件是目前 React 世界中最流行的事情吗？如果没有，你有什么建议我开始学习处理上面提到的项目。

我以前用 react native 写过应用程序，我即将开始我的第一个 react 项目。我注意到一个名为 Styled Components 的工具：https ://www.styled-components.com/docs/basics#motivation

但是，我看不到它有任何明显的好处，除了我可以在样式定义中进行媒体查询，所有这些都与我的组件在同一个文件中。

但是可以说我有这个按钮：

在 styled-components 中写这个会有什么不同？是否只有我的某些样式依赖于某些props样式组件闪耀的情况？

例如，这在反应中不起作用：

我正在学习如何将样式化组件添加到我的 React 应用程序中。我现在想在我的应用程序中添加一个模态对话框，但不确定如何使用样式化组件解决这个问题。

对于那些使用 styled-components 的人，你是如何在你的应用中添加 Modal 的？您是否需要为此使用样式化组件库、反应模式库或 jQuery 解决方案？将 Modal 添加到 React 样式组件应用程序的正确方法是什么？

谢谢

我正在尝试将我的部分标记提取到样式组件中。如果我的标记有嵌套标签，我该怎么做？

据我了解，styled-components 只是带有样式的原生 html 标签。但在这种情况下，我有 ap 标签，里面有锚标签。

我将如何转换类似的东西：

进入免责声明组件？

我有一些样式组件，如下所示：

那里没什么特别的。就像它应该的风格一样。

然而，当我在由其他小组件组成的更大的哑组件中实际使用它们时，我发现自己使用样式对象来设置它们的样式。这是为了添加额外的边距、定位和调整大小。

使用样式化的组件感觉很奇怪，有点适得其反，这应该让我的生活更轻松？现在我必须用两种方式写东西？

如果我做错了事，请赐教。

我有一个样式组件：

这是它的使用方式：

但是，当它动画时，它会在动画的中途不断重置回原来的位置：

我可以确认这不是matchingStatus === MATCHING_STATES.CONFIRMING导致它的原因。

我正在尝试在我rollup.config.js的复制品中添加样式组件，但它会引发错误。我有类似的问题，react-router-dom并通过在外部重命名react-router-dom为.react-router-dom/Linkrollup.config.js

怎么办styled-components？

再生产：

实际行为：使用汇总构建时引发错误

版本样式组件： 2.0.1

版本汇总-插件-babel： 2.7.1

我将以下字符串作为道具传递给我的样式：

然后我有一个这样的定义：

但是背景样式没有应用到我的.map-gradientdiv

这是渲染后 chrome 检查器中的样式：

这两个文本区域只是略有不同，我不明白为什么第二个不起作用。

这是 Codepen。

两者都使用类似的方式来保持它们的高度与内容的高度同步。style.height然而，第二个，我认为应该用新的（来自更新的状态）重新渲染，不应用新的样式。在控制台中查看有问题的值 - style.height 即使在分配新值之后仍保持“自动”。但是，如果您只按 Enter 和 Backspace ，它就可以工作。

什么是我不明白的？