无法使用 typescript jsxImportSource 设置 Emotion

Question

当查看情感文档时，将其添加到react+typescript项目中似乎非常简单。但是，我按照Typescript 说明将其添加到新的 create-react-app 项目中：https://github.com/testerez/cra-ts-emotion/commit/086cc35cda04a1bb72917ccd3a5b79e81e8be1d9

css但是当我尝试以任何方式使用prop 时：

    <div>
  <div css={{ color: "red" }}>Hello!</div>
  <div css={css({ color: "red" })}>Hello!</div>
  <div
    css={css`
      color: red;
    `}
  >
    Hello!
  </div>
</div>

这是我得到的结果：

<div>
  <div css="[object Object]">Hello!</div>
  <div
    css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
  >
    Hello!
  </div>
  <div
    css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
  >
    Hello!
  </div>
</div>

这是我的测试项目：https://github.com/testerez/cra-ts-emotion

我错过了什么？？

Answer 1

您可以将jsxImportSource编译指示添加到每个文件中，也可以指定一次 intsconfig.json和 Once in vite.config.ts：

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "jsxImportSource": "@emotion/react",
    "jsx": "react-jsx"
  }
}

// vite.config.ts
export default defineConfig({
  plugins: [react({ jsxImportSource: '@emotion/react' })],
})