Emotion.js with create-react-app: ReferenceError: jsx is not defined

Question

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

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

ReferenceError: jsx is not defined

这是我的示例组件：

/** @jsx jsx */

import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";

export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

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

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

Answer 1

更新： 根据 github 上的 comment，情感现在应该立即发挥作用。

解决方案是在文件中的某处放置一个 jsx; 语句，如下所示：

/** @jsx jsx */

import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";

jsx;

export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

Answer 2

要添加到 Johannes Klauß 的回答，您不需要参考 jsx;

您只需要 pragma 语句（顶行和导入）：

/** @jsx jsx */
import { jsx } from "theme-ui"

示例：

/** @jsx jsx */
import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";


export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

您可能需要添加：

/** @jsxRuntime classic */

如果使用主题 -ui 和 next.JS

Emotion.js with create-react-app: ReferenceError: jsx is not defined

Emotion.js with create-react-app: ReferenceError: jsx is not defined

emotion

typescript

reactjs

create-react-app