问题标签 [styled-components]

我们如何避免${props => props.myProp}在styled-components中编写？

例如，如果我们正在设计一个按钮：

在此处和此处的文档中，我们需要编写类似${props => props.myProp}. 但这看起来很烦人且不必要。如果我们可以只写${props.myProp}.

我目前的解决方法是编写如下内容：

但这并不像使用 just 那样简单明了${props.color}。

那么，我们该怎么做呢？

我有一个外部Select反应组件，它反过来渲染li标签。我想用20pxli设置除第一个之外的所有样式；margin-left

下面是代码：

知道为什么这不起作用或另一种方法吗？

我在我正在测试的组件中使用样式化组件，它看起来像这样：

我有一个看起来像这样的测试：

我希望能够使用酶的底座来匹配我的造型规则。我有两个结果，subject断言的输出如下所示：

深入研究源代码，我发现：

是错误所在，它可以_reactInternalInstance在组件上找到 ，但不能找到_renderedComponent.

Primitives support (for) styled components令人兴奋......安装后我在浏览器中收到此错误：

仅当将 import 设置为 import styled from 'styled-components' 时才会显示此错误运行 create-react-app 后。

应用程序.js

安装/s 似乎没问题？？？

纱线添加样式组件反应基元

我正在使用样式化组件并使用其标记的模板文字语法生成组件，例如：

在一种情况下，我需要调用一个函数，该函数基于断点生成媒体查询并传递要包含在其中的 css 的标记模板文字。

例如：

媒体功能可能看起来像这样：

是否可以同时传递一个值和一个标记的模板文字，或者我是不是走错了路？

我对样式组件相当陌生，我正在尝试让媒体模板在我的反应应用程序中工作。它是使用“ create-react-app ”创建的，我遵循了 styled-components 文档中发布的代码：

尽管如此，我收到以下错误：

第 14 行：'css' 未定义 no-undef

第 16 行：'css' 未定义 no-undef

第 14 行如下： acc[label] = (...args) => css`

那条线有什么问题？我获得此代码的代码片段的链接在这里

我需要将提供的 CSSstyled-components输出到我的public/css目录中的物理 CSS 文件。

与所有其他样式组件的样式一起，上述组件将输出到public/css/styled.css：

我在用：

我一直在尝试将styled-components与material-ui的alpha版本一起使用

根据文档，这应该是开箱即用的。

这段代码：

会产生这样的东西：

这看起来不错的样子。

但是，我唯一的问题是注入的 CSS 样式（pic）的顺序。来自 styled-components 的样式在 MUI 的样式之前注入，这会降低它们的优先级。

有什么方法可以在不使用的情况下解决这个问题!important？

我有一个简单的组件这是它的 2 个版本 - 有和没有样式组件：

没有样式化的组件

使用样式化组件

如何在上一个示例中实现相同的悬停行为？

我一直在尝试学习 React.js，但我在 react、样式化组件和 Bootstrap 之间的一些样式方面遇到了麻烦。理想的目标是连续拥有 3 个 gif，所有这些 gif 都带有一个居中的按钮，并且它们之间没有间距。我希望每个 gif 都有 100vh。

以下内容应包含需要了解的所有内容。

反应文件：

webpack.config：

索引文件调用实际上名为 thumbnail.js 的“React”文件

index.js：

我知道这对于有经验的开发人员来说可能看起来很糟糕。我对网络开发还是很陌生，所以也欢迎任何指针