问题标签 [emotion]

我用来react-emotion为我的一些 React 组件设置样式。我尝试使用服务器端启动的 Chromium 实例puppeteer（

react-emotion但是，不会获取由 生成的每个 CSS 。我自己查找了 HTML（使用真正的 Chrome 实例），但它不存在。但是组件的样式都正确。在使用 DevTools 查看样式定义时，我可以看到每个样式定义都以斜体显示。这意味着什么？

有没有办法通过样式元素将 CSS 直接“渲染”到 DOM 中？

谢谢你。

我关注了https://github.com/emotion-js/emotion/issues/546，其中 Emotion 的作者 Kye 提到了一个解决方案，尽管我并不完全理解。

所以我做了一个小的CodeSandBox来实现问题中提供的细节。我怎样才能使background-color主题工作injectGlobal？

我正在使用反应工具提示，反应情绪。

我无法弄清楚如何设置跨度的样式以覆盖默认样式。

这是我到目前为止所得到的：

任何人都对如何设置此跨度的样式有任何提示或特定的权威指南，以便我可以覆盖 react-tooltip 中的默认值？

文档参差不齐，网络上几乎没有任何示例。

有没有办法添加外部（例如引导程序）类以及反应情感样式？

谢谢！

我正在尝试使用情感来覆盖来自 3rd 方库的现有 React 组件的样式。

我尽力简化此代码框中的问题

模拟ExternalLib我正在使用的第 3 方组件，我不应该更改代码。

如您所见，它接受 css 命名空间的“前缀”道具，并在静态字符串中使用 className。（原来的也将它作为 sass 变量）

我首先尝试使用函数获取基类名称哈希css，然后尝试以情感的方式组合它们，并得到预期的视觉结果。

但是检查样式标签，我有很多重复的样式，我做错了什么？

你可以看到有两倍的黄色背景

我想做一个动态组件。（动态标签将是一个样式化的组件 -> 情感）

该组件将是一个样式化的组件，例如：

这看起来一切都很好，并且工作正常，BUUUUUT：

当我尝试在另一个 DynamicComponent 中使用 DynamicComponent 时：

那么出于某种原因，动态子代将使用动态父代的样式。

有什么我想念的吗？

PS：

如果不使用动态样式，我会这样做：

然后正确应用样式、类名、样式标签。

为了更清楚一点：

如您所见，DynamicComponent 将使用父级的样式、类名、样式标签...（不是我期望的行为）

https://codesandbox.io/s/w242n1vonw

我有一个使用样式系统和反应情感的项目。

为了可重用性，我设置了继承自基础 css 的标题样式。

有时我希望能够使用样式系统覆盖属性，例如：

当我的基本组件是：

但是，如果我想潜在地覆盖十个属性，我需要有条件地重用该道具。这是编写此类功能的惯用方式吗？

使用emotion（https://github.com/emotion-js/emotion）我知道我可以使用以下内容进行主题css化styled：

然后在 JSX 中：

但是有没有什么优雅的方式来主题化css- 不喜欢使用组件styles化，因为我想保留 JSX 中的语义 html 元素（也有大量的代码库，并且更容易从 sass 迁移到情感而无需使用styled）

我知道我可以做类似的事情：

然后jsx：

但这意味着一直从组件传递一个主题道具——这有点麻烦

有一个更好的方法吗 ？以某种方式包装css一些东西，以便注入主题变量？

我正在尝试重现Slate Examples中显示的示例。除了工具栏的外观，我拥有编辑器和所有功能。我已经导入了 'emotion' 和 'react-emotion' 库。但我没有看到呈现的图标，而是看到代替它们的文本：

我在定义图标的“components.js”中看到以下代码：

` 是否需要导入任何其他库才能显示图标或进行任何其他配置？

我怎样才能有一个由我传递给我的 EmotionJS 样式的状态定义的道具？

我真的不明白这个错误信息：

css 调用中的插值函数已被弃用，并将在 Emotion 的下一个主要版本中删除。如果你想有一个基于 props 的 css 调用，创建一个返回 css 调用的函数，像这样 let dynamicStyle = (props) => csscolor: ${props.color}可以直接用 props 调用，也可以像这样插入到样式化调用中 let SomeComponent = styled ('div')${dynamicStyle}