问题标签 [styled-components]

我将 Redux Form 与 Styled Components 一起使用。

我想获得 Redux 表单字段的 ref，所以我可以在某些条件下集中它。

代码看起来像：（有点简化）

其中CommentTextArea是这样的样式组件：

问题是innerRef'this值未定义。有没有办法访问 reftextArea并在必要时集中注意力？

（FormLabel也是一个样式化的组件，但没有必要为问题显示它）

提前致谢。

我的网站有多个主题。我正在尝试将 a 添加srcSet到这样的图像中：

该src属性是正确的，但srcSet不是：

styled-components主题功能很棒，我想用它来组织我的所有主题，但我想不出一种方法来正确地srcSet用它构建一个。任何人都有任何策略，还是我需要完全转向另一个方向？

我想使用styled-components创建一个可重用的“IconButton”来扩展Rebass Button，但我收到了这个警告：

Unknown props 'small, 'overlay' on <button> tag. Remove these props from the element

如何从元素中删除这些道具？

根据styled-components 文档，我可以参考另一个组件来触发，例如悬停效果。

基本上，将鼠标悬停在 my 上应该<Link>会触发.background-color<Link2>

这没有发生。任何想法为什么？

我在这里准备了一个代码片段：https ://codesandbox.io/s/qv34lox494

尝试将“s”字符串添加到样式组件中传递的道具时遇到问题。另外，我不完全确定我是否可以prop.x在样式组件中使用。这就是我的意思：

让我知道我是否可以更清楚一些事情。

我有以下内容Button.js：

但是当我运行它时，在编译过程中出现以下错误：

./src/components/Button.js 第 10 行：“css”未定义 no-undef 第 15 行：“css”未定义 no-undef

然后我使用这样的按钮：

我在这里做错了什么吗？

Preact CLI 有一个称为预渲染的功能。它使特定路由的内容可以直接在 HTML 中提供，而无需加载 JavaScript。

内容直接使用 HTML 加载（静态服务器端呈现）。因此，由于此时 JavaScript 包尚未加载，因此显示的内容没有样式，导致样式在几分之一秒后闪烁。

您可以禁用预渲染，这可以正常工作，但这意味着放弃一个有用的功能。是否有预渲染并包含样式的解决方案？或者我还能做些什么呢？

将伪类应用于样式化组件:before的正确方法是什么？:after

我知道你可以使用

&:hover {}

将:hover伪类应用于样式组件。

这适用于之前和之后的所有伪元素吗？

我已经尝试在一些相当复杂的示例中使用&:beforeand&:after策略，但我不确定我的尝试是否不起作用，因为我的示例有问题，或者它只是不能那样工作。

有人对此有一些见解吗？谢谢你。

我有以下代码：

我想将背景作为道具传递给我的样式化组件，这样当它传递到图像文件的链接时，它会将其设置为背景，代码编译但背景不显示。我究竟做错了什么？

有没有办法将styled-components与react-bootstrap一起使用？react-bootstrap 公开bsClass属性而不是className其组件，这似乎与样式化组件不兼容。

有什么经验吗？