问题标签 [emotion]

我将一个项目从迷人转移到了情感。唯一缺失的拼图？测试。

在glamorous中，我可以找到带有如下选择器的元素：

这不再起作用了。到目前为止我发现的最好方法是：

我喜欢前一种方式，因为它根本不需要导入组件。一些情绪成分是在文件中定义的，而不是导出它们。在这些情况下，它会更加冗长：

有没有更好的办法？谢谢阅读！

我正在尝试使用情感库中的css 道具，我在另一个开发人员之后超越了该项目。在文档中，他们说开始使用的一种方法是使用Babel Preset。我已经在我的中添加了，但我得到了这个非常有趣的错误。ReferenceError：未定义导出。css prop@emotion/babel-preset-css-proppresetsbabel.config.js

我无法找到任何与此直接相关的错误的线程，emotion library所以我假设我在基本的 babel 设置中做错了什么。

是否有可能使用babel.config.js而不是.babelrc会导致这样的错误？

谢谢你的时间！

这是我的 babel.config.js

It's needed to pass theme to test correctly some of my components, using emotion ThemeProvider or withTheme API.

Actually, I found the same issue with 'styled-components', it described here. According VladimirPesterev comment, I got this API-wrapper:

When I use those helpers in my tests, I get an error:

TypeError: wrapper.instance is not a function

Looks like it's outdated API. There is another solution from arka-na in topic linked above, but I have no idea how to adopt it to emotion:

UPDATE According Yichaoz answer, I ended-up with this snippet:

以前在 Emotion 9 中，您可以使用 Emotion 类名称来利用级联。您可以将情感 const 包裹在大括号中，并在其前面加上句点，然后是美元符号。例如，您可以这样做：

我怎样才能在 Emotion 10 中实现这种行为？那是我的问题。

以下是有关不使用期间美元符号时会发生什么的更多信息。

现在，以下是可取的：如果在 Emotion 9 或 10 中没有使用句点，则父 const 将继承嵌套的 const 样式。此外，如果嵌套的 const 具有覆盖样式，则这些样式最终将由父级继承。

我想使用酶检查特定的 css 属性值。为组件设置样式 - 使用了情感 css 助手。

让我们假设下一个案例：

这里：

• mountWithTheme - 只是酶渲染方法的包装，但允许传递主题；

• toHaveStyleRule 是开玩笑的情感匹配器。

这不行，我有

未找到属性：字体大小

如果您查看 jest-emotion example，您会看到那里使用了“样式化”包装器，因此创建了包装器组件，但“css”帮助器并非如此。

我还考虑过使用酶渲染助手来创建实际的 html，但似乎 Cheerio 包装器也无法访问 css 值。

我正在尝试将 CSS 代码从 Stylus 转换为 Emotion。在 Stylus 中与 CSS 一样，您可以添加伪元素::selection来更改color文本被选中的时间。

我尝试了这种语法，但似乎无法正常工作

如果有人有线索！谢谢你的帮助！

我有一个没有主题的基本组件，我希望为它及其子组件设置主题，是否可以使用 Emotion？

让我有：

基本组件.jsx

ThemedMyComponent.jsx

我所有的主题内容都在第二个组件中，我想复杂的逻辑和装饰BaseComponent唯一的内部ThemedMyComponent。

最初的方法是：

并将 3 className 传递给它，这意味着我必须使用withTheme并做很多事情cx，更不用说，你不能再情绪激动地这样做 10. 有没有更实用的方法来做到这一点？

这样做，我需要的只是css来自ClassNames渲染回调，这使得styled未使用......

我正在使用 React 16 和 Emotion 10.0.7。Emotion 库是一个 CSS-in-JSS 库，可以与用于样式组件的 React 一起使用。我让他们一起工作并为组件设计样式。在大多数情况下，我的 CSS 被认为是“更具体”的，并且会像人们期望的那样覆盖其他 CSS。

我正在尝试:focus从按钮中删除轮廓。我知道这是不受欢迎的，但我被要求为一个工作项目做这件事。

我的问题是这个。我已'outline: none'在组件级别的 Emotion CSS 标记中指定。这被翻译成一个类，:hover伪选择器应用于该类，然后被 Chrome 中明显的“全局” :focus 选择器覆盖（我可以在 Chrome 开发工具中看到删除线）。

我将图中的选择器称为“全局” :focus 选择器，因为没有更好的术语。通常会指示 CSS 来自何处（用户代理、、some_file.css 等），但此处框的右上角是空的。

这是:hover伪类的全局 Chrome 选择器吗？我可以覆盖它或以某种方式绕过它吗？global_hover_selector_chrome

下面的设置看不到background-image。作为调试步骤，我尝试background: pink在内部进行设置const background，这确实有效，确认emotion运行正常。

打开时React Dev Tools extension我可以看到background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);应用没有错误。

请问我的问题是什么？

我的文件结构如下所示：

我index.js正在尝试向其中添加背景图像。

我有一系列日志行，集合中有相应的级别{verbose,debug,info,warning,error,fatal}

我想将每个级别（基于我正在渲染的线的数据）映射到一种颜色。用情感表达这一点的好方法是什么？