Emotion.js с create-реагировать-приложение: ReferenceError: jsx не определен

Question

Я пытаюсь использовать emotion.js с Create-реагировать-приложение и 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-реагировать на приложение), была бы очень признательна.

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>
);

Answer 2

Чтобы добавить к ответу Йоханнеса Клауса, вам не нужно ссылаться jsx;

Вам просто нужен оператор прагмы (верхняя строка и импорт):

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

также при использовании theme-ui и next.JS