Emotion 的 CSS 道具不适用于 Create-React-App

Question

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

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

Emotion 的 CSS 道具不适用于 Create-React-App

Emotion's CSS props not working with Create-React-App

css

emotion

reactjs

create-react-app