在我的 React 应用程序中使用 @emotion/core 时出现错误

Question

图片1 请帮忙，这些错误导致我的React应用程序无法编译。我该如何修复？ 我还附上了App.tsx文件的图片。 如何解决这个错误？

找不到模块“@emotion/core”的声明文件。'c:/Users/nwoko/source/repos/QandA/QandAfrontend/frontend/node_modules/@emotion/core/dist/emotion-core.cjs.js'隐式具有“any”类型。 如果存在，请尝试npm i --save-dev @types/emotion__core，或添加一个新的声明(.d.ts)文件，其中包含declare module '@emotion/core';ts(7016)

类型'{ children: Element[]; css: any; }'不可分配给类型'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'。 属性'css'在类型'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'上不存在。ts(2322)

图片2

- KingNOB

---

你正在使用TypeScript完成所有工作吗？它要求你还安装了"emotion"库的类型。输入npm install --save-dev @types/emotion来安装。 - Faktor 10

@Faktor10，是的，我正在运行typescript，你建议的命令没有起作用。 - KingNOB

Answer 1

借鉴@sanderdebr的建议，

我在更改导入行之前运行了npm install --save @emotion/react，然后将其更改为import { jsx, css } from '@emotion/react'，并消除了TypeScript错误TS7016

然后我在文件tsconfig.json中添加了"types": ["@emotion/react/types/css-prop"]，以消除第二个TS错误（2322）

- oldbrazil

Answer 2

帮助我:

tsconfig.json

"types": ["@emotion/react/types/css-prop"],

*.tsx

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";

- Sergey

Answer 3

Emotion建议在他们的文档中使用@emotion/react。尝试使用命令npm install --save @emotion/react安装适用于React的情感，并使用import { jsx，css } from '@emotion/react'

- sanderdebr

---

从'@emotion/core'导入不会编译。从'@emotion/react'导入可以。但是，我仍然遇到与@KingNOB相同的错误： 属性“css”在类型“DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>”上不存在。TS2322 - oldbrazil

Answer 4

使用/** @jsxImportSource @emotion/react */代替/** @jsx jsx */

- EUNJI JO

---

改进此帖的建议：您可以提供背后的原理。 - Bedir Yilmaz

Answer 5

这样做可以：

/** @jsxRuntime classic /
/* @jsx jsx */
import { jsx } from "@emotion/react";

- Muslem Omar

Answer 6

在新版本的MUI中，您需要安装以下两个软件包：

npm install --save @emotion/react
npm install --save @emotion/styled

- Abdulrahim Klis