使用create-react-app的Emotion.js:ReferenceError:未定义jsx

Question

我正在尝试将emotion.js与create-react-app和TypeScript结合使用.继文档我添加@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上的评论,现在情绪应该开箱即用.

解决方案是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>
);