问题标签 [styled-components]

我是styled-components第一次玩，我遇到了“react”传递仅由样式组件本身使用的道具的问题。

这是我的组件：

当我使用primary道具调用它时，我收到一条警告，react表明我正在将primary道具应用于<a />元素。我明白为什么会发生这种情况 - 但我该如何阻止它呢？

我当然可以围绕react-router'sLink组件创建一个包装器来剥离这个道具——但这有点笨拙。我敢肯定，只是我还不是这个库 API 的专业人士——所以有人能指出我正确的方向吗？

styled.a出于某种原因，当我直接创建 DOM 组件时（例如），我没有这个问题。

我正在利用 Bootstrap 网格，因此我正在创建渲染元素的组件，其中包括class：

现在，有时我希望我的行被填充，所以我试图包装我的Row组件：

这应用了填充，但是当div渲染时，它没有类。

Chrome 的 React 插件显示如下：

不能为被包装的组件保留类名吗？

我很陌生next.js。将它用于我的应用程序的服务器端渲染。

根据文档，您可以从应该位于根目录的静态文件夹中导入 css 文件，但我想从 node_modules 导入 css，因为我已经扩展了引导程序并创建了自己的包。

我正在使用样式化组件 v2.1.1。文档说，为了避免不必要的包装，我们可以使用.attrs构造函数。请参阅：https ://www.styled-components.com/docs/basics#attaching-additional-props

我尝试使用它，但我总是在控制台中收到以下警告：

我创建了一个 Webpack Bin 来显示错误：https ://www.webpackbin.com/bins/-KpKbVG-Ed0jysHeFVVY

我是否以错误的方式使用它还是有问题？

使用 react 和 styled-components 我设法编写了一个小组件来提出问题并显示一个带有 5 个选项/开始的栏供用户选择。

这是它应该看起来的样子：

它在桌面上一切正常，但在移动浏览器（Android 或 IOS）上查看时，用户会看到：

下面是我完整的反应组件，任何想法我做错了什么？

我正在尝试做一个带有文本和图标的基本按钮。这是我现在的代码：

IconNotification.js：

ButtonAddAlert.js：

我想要这样：

• 当我悬停按钮时，svg 图标会改变颜色，但仅适用于这种特定情况
• 还可以通过传递道具来更改 svg 图标颜色（如果我需要在另一个组件中使用相同的图标）

我觉得我没有正确理解 styled-components 的概念，因为我现在不明白它是如何实现的。

如果你知道我做错了什么，请告诉我！谢谢，

我正在尝试设置 react-router-dom NavLink 导航栏的样式。我已经采取了几种不同的方式，但在每种情况下，无论我选择哪种方式都会使 NavLink '不可点击' - 这将是一个样式精美的框，不会在点击时导航。以下是我采取的几种方法：

我尝试过的一种方法是通过点击测试制作迷人的 CSS 框。这是我想要使用的首选方法，因为它允许我设置悬停和其他伪元素的样式。我尝试了以下但没有成功。这两个华丽元素只是样式化的 div。我担心因为 navlink 被埋在 div 中，它位于元素的“下方”，所以我尝试为 Navlink 设置 zIndex=999，为 glam 元素设置 zIndex=1（以及设置相对和绝对定位） ，并且我还尝试为 glam 元素设置 pointerEvents='none'，以便您可以“点击”到导航链接。

造型：

渲染中的链接：

我尝试做的另一种方法（作为一种技巧）是在类中创建一个函数并以这种方式通过点击事件发送。这里的样式只能在 navlink 上，所以不应该有任何点击问题，但同样，点击不起作用！

功能：

和链接：

当我将 NavLinks 放在这样的样式组件中时，它的工作原理是：

但是，styled-components 对伪元素没有很好的支持（澄清： &.active 方法在上面不起作用），所以我不想使用它。有谁可以告诉我为什么我迷人的 css 示例不起作用？

我将如何react-datepicker使用 styled-components 设置样式？datepicker 库看起来像是使用某种类型的 BEM 样式（下面的屏幕截图），我通常只使用它们提供的类名并使用 Sass 设置样式。但是，我将如何使用样式化组件来定位这些类名？这甚至可能吗？

我正在尝试重新使用和扩展 a styled-component，但没有运气。我怀疑我还没有完全掌握如何正确使用styled-components

icon我有一个组件，它根据传递给它的道具呈现人字形图标。我想要做的是导出这个组件，然后导入它并扩展它的样式。即 - 在此示例中删除其填充Header.jsx：

雪佛龙.jsx

页眉.jsx

使用上面的代码，我得到控制台错误：Uncaught TypeError: _Chevron2.default.extend is not a function

似乎无法使用 Jest 进行测试，因为我使用的是样式组件。有人找到解决方案吗？

我将我的“StyledComponents.js”组件放在一个单独的文件中，并根据需要将它们导入我的页面..ala。

从“StyledComponents”导入{页脚，页眉，LeftNav}；

导入的文件部分令人窒息，其中包括我的 styled.js 文件中的组件（ala：styled-components）。

基本上，它是说“样式化”是未定义的。然而，在我的文件中，我有：

更新包括 babelrc 和 package.json 文件

babelrc

包.json 文件