2

我正在尝试将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 脚本）将不胜感激。

4

2 回答 2

7

更新：根据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>
);
于 2019-01-06T15:15:27.217 回答
0

要添加到 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 */

以及如果使用 theme-ui 和 next.JS

于 2020-12-21T14:42:52.903 回答