问题标签 [emotion]

使用 as React 组件样式化纯 HTML 元素的基本用法react-emotion是这样的：

给定的代码会给我们这样的东西：

无论如何我可以id为生成的 HTML 元素添加一个属性吗？提前致谢。

我试图了解（作为首席技术官）之间的最佳选择

• jss
• 感情
• 样式组件。

我会尽量不要让这个问题“太宽泛”或“离题”，因为这是一个非常主观的话题。如果没有人回答整个问题，我会尝试自己回答（在这里）这个问题，我会问非常封闭的问题：

• 他们三个如何“编译”（外部css、<style>标签、style=属性）？
• 他们三个如何才能与 CRA 顺利集成（无需过多调整且无需弹出）？
• OpenSource POV（年龄、社区、插件、支持）呢？
• 性能怎么样？

请我不希望这个问题结束，所以我不想要一些代码风格的意见，我想避免主观的 POV。

我使用情感库进行反应，我使用：悬停效果我想如何在悬停后附加另一个类名？

就像 ex const button1 = css color:red' &:hover (tho here when its hovered i wanna color button2*) {color:white} * 我想如何附加它的样式一样？

我正在使用 Webpack 4、Babel 7 和 Emotion 10。

我安装了@emotion/core @emotion/styled 和推荐的插件 babel-plugin-emotion

样式工作正常。我可以创建一个样式化的组件并使用它。但是，如果我尝试使用本机 css`` 功能，它会渲染对象而不是样式。

如果我检查我看到的标记

如果我使用className而不是css，是一样的。另外，如果我内联或使用 css() 功能。

如果我 console.log() 那个 Object 结果是：

任何人都知道出了什么问题...？我将不胜感激。我进行了研究，但找不到其他人提到这个问题，所以可能我做错了什么。

我是 CSS-in-JS 和情感的初学者，并试图将一个 sass react 应用程序移植到情感上。从一开始我就已经遇到了不知道如何设置 body 标签样式的问题。

人们通常习惯document.body.style这样做吗？我在任何地方都找不到这个...

假设我想将以下代码移植到情感上，那将如何实现？

是否已经发展出任何涵盖此内容的最佳实践？

这似乎是一个最佳实践，因为它几乎无处不在。但是，没有任何地方清楚地解释它到底做了什么......

我确实在文档中找到了一条评论：“这条评论告诉 babel 将 jsx 转换为对名为 jsx 而不是 React.createElement 的函数的调用”。这是否仅仅意味着它用 Emotion 替换了标准的 React 功能？省略 /** @jsx jsx */ 评论有什么后果吗？

我一直试图让这个逻辑与反应情绪一起工作，使用传递给这个组件的道具来呈现我的 CSS。但是动画 CSS 属性被忽略了——我认为这是因为我这样做的方式意味着为动画属性字符串返回函数，而不是值。

谁能帮我为此做正确的语法？

我正在尝试将emotion.js 与create-react-app 和TypeScript 一起使用。按照我在文件顶部添加@emotion/core、使用import {jsx, css} from '@emotion/core';和添加的文档。/** @jsx jsx */

但是当我运行应用程序时，会抛出以下错误：

ReferenceError: jsx is not defined

这是我的示例组件：

引发错误的行是函数的定义：export const Header: React.FunctionComponent<{}> = () => (

任何帮助如何使它工作（除了弹出 create-react-app 脚本）将不胜感激。

出于好奇，我在我的 React 应用程序中使用样式化组件，并在其中使用建议的主题来让所有颜色和尺寸随处可用。

目前我正在这样做：

所以我使用了主题，ThemeProvider并且还对外部组件进行了额外的检查。

我现在的问题是，为什么我不能这样使用它：

使用起来不是更方便、更容易吗？如果是这样，他们为什么不这样建议呢？我只是害怕它有一些我现在看不到的巨大缺点。

我正在尝试向我的 StyledComponents (Emotion-React) 添加类型。假设我有一个样式化的 Button 组件，当我使用通用 StyledComponent 声明它的类型时，我需要向它传递 3 个类型变量：

Props 和 InnerProps 有什么区别？InnerProps 只是孩子吗？