Emotion 的 CSS 属性不适用于 Create-React-App

Question

我想将 Emotion 与 CRA 一起使用，所以我按照文档安装了它，并尝试使用 css prop，如下例所示：

import { FC } from "react";
import { TypographyProps } from "./Typography.propTypes";
import * as styles from "./Typography.styles";

export const Typography: FC<TypographyProps> = ({
  children,
}) => {
  return <h1 css={styles.typography}>{children}</h1>;
};

但是没有成功。

通过检查代码，我发现了这一点：

<h1 css="You have tried to stringify object returned from `css` function. 
It isn't supposed to be used directly (e.g. as value of the `className` prop), 
but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">
Header</h1>

我尝试按照这篇博客文章中的解决方案进行操作，但仍然不起作用： https://harryhedger.medium.com/quick-how-to-use-the-emotion-css-prop-with-create-react-app-5f6aa0f0c5c5

我能做些什么来解决它吗？

谢谢！

Answer 1

解决此问题的最简单方法是在文件开头添加以下行。

/** @jsxImportSource @emotion/react */

Answer 2

如情感文档中所述：

为了将 css 属性与 TypeScript 一起使用，您必须配置 新的

JSX transform

和

jsxImportSource

TSConfig 选项 （自 TS 4.1 起可用）。对于这种方法，您的 TSConfig

compilerOptions

应包含：

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

对于大多数用户来说，这是必需的设置。