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

Question

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

除了 css 属性上的 Typescript 出现类型错误外，我一切正常。我一直在搜索文档寻找答案，但似乎找不到任何东西。是否需要安装一些额外的类型包，以便 Typescript 了解 MUI 组件上存在的 css 道具？

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

TS 错误：

属性 'css' 在类型 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; ... 6 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>' 上不存在。

Answer 1

好吧，我觉得自己很愚蠢。我认为这是 MUI 无法正确导出类型的问题，但事实证明我只需要在我的 tsconfig.json

中设置 jsxImportSource

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

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

Can't get Typescript to understand the css prop (emotion) on Material-UI components

emotion

typescript

reactjs

material-ui