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 */