無法獲取 Typescript 了解 Material-UI 組件上的 css 道具（情感）

Question

我想設置一個 Typescript 項目，該項目使用 Material-UI v4.11.4 來使用情感樣式來為 MUI v5 版本做准備。 目標是在項目中引入情感，以便開發人員可以開始使用新樣式，而不是通過即將棄用的makeStyles function 繼續編寫 styles。

除了在css道具上的 Typescript 收到類型錯誤之外，我一切正常。 我一直在尋找答案的文檔，但似乎找不到任何東西。 為了讓 Typescript 了解 MUI 組件上存在的css道具，我需要安裝一些其他類型的 package 嗎？

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 錯誤：

類型'IntrinsicAttributes & { href: string; 上不存在屬性'css' } & { 孩子？：反應節點； 顏色？：顏色 | 不明確的; 禁用？：boolean | 不明確的; disableElevation?: boolean | 不明確的; ... 6 更多...; 變體？：“文本”|... 2 更多... | 不明確的; } & {...; } & CommonProps<...> & Pick<...>'。

Answer 1

嗯，我覺得很愚蠢。 我認為這是 MUI 無法正確導出類型的問題，但事實證明我只需要在jsxImportSource中設置 jsxImportSource

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