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

【问题标题】：Error Using @emotion/core in my React app在我的 React 应用程序中使用 @emotion/core 时出错
【发布时间】：2021-04-03 20:39:08
【问题描述】：

Picture1 请帮忙，这些错误正在阻止我的反应应用程序编译。我如何解决它？我还附上了 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（如果存在）或添加包含declare module '@emotion/core';ts(7016) 的新声明（.d.ts）文件

类型'{孩子：元素[]; CSS：任何； }' 不可分配给类型 'DetailedHTMLProps'。 'DetailedHTMLProps'.ts(2322)

类型上不存在属性“css”

Picture2

【问题讨论】：

你正在通过打字稿运行你的一切？它要求您还安装情感库的类型。输入 npm install --save-dev @types/emotion
@Faktor10，是的，我正在运行 typescript 你建议的命令不起作用。

标签： reactjs emotion

【解决方案1】：

利用@sanderdebr 的建议，

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

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

【讨论】：

【解决方案2】：

帮助我：

tsconfig.json

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

*.tsx

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

【讨论】：

【解决方案3】：

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

【讨论】：

从 '@emotion/core' 导入不会编译。从 '@emotion/react' 导入确实如此。但是，我仍然得到与@KingNOB 相同的错误：“DetailedHTMLProps, HTMLDivElement>”类型上不存在属性“css”。 TS2322

【解决方案4】：

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

【讨论】：

改进这篇文章的建议：您可以提供关于背后基本原理的见解。

【解决方案5】：

这行得通：

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

【讨论】：

【解决方案6】：

使用新版MUI需要安装以下两个包：

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

【讨论】：