无法让 Typescript 理解 Material-UI 组件上的 css prop（情感）

Question

我想要设置一个使用 Material-UI v4.11.4 的 Typescript 项目，以使用情感进行样式设置，为 MUI v5 版本做准备。目标是将情感引入项目中，以便开发人员可以开始使用新的样式，而不是继续通过即将弃用的makeStyles功能编写样式。

我一切正常，除了从 prop 上的 Typescript 收到类型错误之外css。我一直在搜索文档寻找答案，但似乎找不到任何东西。为了让 Typescript 理解cssMUI 组件上存在的 prop，我是否需要安装一些额外的类型包？

import { Button } from "@material-ui/core";

const Btn = () => {
  return (
    // this successfully applies styles, but causes a TS error
    <Button css={{ backgroundColor: "red" }}>
      Click Me
    </Button>
  );
}

传输错误：

类型“IntrinsicAttributes & { href: string;”上不存在属性“css” } & { 孩子？：ReactNode; 颜色？： 颜色 | 不明确的; 禁用？：布尔值| 不明确的; 禁用海拔？：布尔值| 不明确的; ... 6 个以上 ...; 变体？：“文本”| ... 2 更多... | 不明确的; } & { ...; } & CommonProps<...> & Pick<...>'。

Answer 1

嗯，我觉得自己很蠢。jsxImportSource我以为这是 MUI 未正确导出类型的问题，但事实证明我只需要在 tsconfig.json 中设置

"compilerOptions": {
  "jsxImportSource": "@emotion/react"
}