问题标签 [styled-components]

我使用styled-components作为 React 样式的解决方案。他们有一个很好的方法，使用模板文字来插入 CSS。模板文字被传递给组件的 props，以便您可以执行以下操作：

结果是一个组件div根据 的值呈现具有绿色或红色背景的标签isMatching。以上将通过 JSX 像这样使用：

每次值props改变时，这个字符串都会被重新插值。这最终让我想到了我的问题：

每次插入模板文字时，是否会重新定义模板文字中定义的箭头函数？

如果是这样，那么我可能会考虑在模板文字之外创建函数并将其传入，例如

我正在使用样式化组件来构建 UI 库。我正在尝试将该库导出为节点包以在其他应用程序中使用。

我在构建库时遇到了提供字体的问题。他们是404ing。

这是我用来创建字体规则的 javascript -

这是我用来构建库的 webpack 配置

运行 webpack 会生成一个如下所示的构建文件夹 -

然后我在我的 App.js 中使用import '../../lib/wabelane'

它输出一些像这样的html......

我的问题是 webfonts 是 404ing，它们似乎不存在于那个位置。知道我做错了什么吗？

在样式化 React.js 组件时，有没有办法将 postcss 与 styled-components 一起使用？我正在使用像 px-to-rem 和背囊 css 响应字体这样的 postcss 插件，它们非常棒，我不想放弃它们。有没有办法将两者结合起来？

是否有任何示例演示显示样式组件可以在服务器上呈现？这对于反应中的通用应用程序来说很重要......

我正在使用reactwith styled-components，并jest enzyme用于我的测试。我在测试一个由于themefrom而不断出错的主题组件时遇到了麻烦styled-components。

我的组件是：

我的测试是：

开玩笑给了我这个错误：

基本上，它会引发错误，因为theme它是未定义的，因此它无法读取其中的colors属性。如何将主题传递给我的组件？

如果我想要一个按钮，但只是其中的展示部分，那么如果我这样做：

我被迫渲染一个button标签，但是如果语义上我需要一个锚怎么办？

当涉及到提供的操作方法需要参数的按钮的 onClick 处理程序时，我无法使用 Enzyme 的 contains 方法。我在将 redux 操作传递给组件时遇到了这个问题，但我将在这里使用简化的示例。

假设您有两种方法：

您将它们传递给一个组件，并且在该组件中您有两个按钮：

当我测试第一个按钮时，没有问题：

它通过了。但是，第二个：

失败并显示无用的输出：

我试图通过尝试各种比较来了解更多信息，例如：

这导致：

我使用 Jest 作为测试运行程序，并且在 create-react-app 和 react-boilerplate 设置中都遇到了这个问题。知道我做错了什么吗？

编辑

我将在下面的答案中给出我自己的解决方法。我将在那里使用我的实际代码而不是这些示例。但是，我仍然很好奇为什么这里的测试失败了....

我在命名这个问题时遇到了麻烦，而且它似乎很广泛，所以，请原谅我哦版主。我第一次尝试样式化组件并尝试将其集成到我的反应应用程序中。到目前为止，我有以下内容：

所以，只是一个普通的类，但然后我导入styled components顶部，定义const Heading，我指定 aHeading真的只是一个样式化的h1。但是我收到一个错误，指出这Heading是一个重复的声明，因为我也说class Heading....

我显然在这里完全遗漏了一些东西。所有在线示例实际上并没有显示您如何将它与 React 一起使用。即我在哪里定义我的类、我的构造函数、设置我的状态等。

我是否必须将样式化的组件移动到它自己的文件中，即：

然后创建一个 React 组件，作为各种包装器，例如“HeadingWrapper”：

对此有一点澄清将不胜感激！谢谢 ：）

我猜并不是所有的 UI 框架都可以轻松地与样式化组件一起使用。因为它们的特异性可能太高等等。

我在这方面是正确的吗？

样式化组件是否有任何模式允许它们与任何 UI 框架一起使用？

框架是否有一种模式，可以让它们与样式化的组件一起很好地工作，而不是用它来编写？

我知道这可能是主观的，但我试图询问互操作性的客观模式。

是否可以使用 StyleSheet 或 styled-components 在本机反应中进行转换？我正在尝试以下没有运气。