当我尝试在react 18中使用create-react-app时，css prop不起作用，typescript和emotion 11 - elements仍然是onstyled，并且在DOM中，元素有一个css属性，其值为：
您已尝试将css函数返回的对象字符串化。它不应该直接使用（例如作为className prop 的值），而是交给情感，以便它可以处理它（例如，作为css prop的值）。
我可以通过建立一个新项目来复制：

npx create-react-app test-ts-emotion --template typescript
cd test-ts-emotion 
npm i --save @emotion/react

然后编辑src/App.tsx为：

import React from 'react';
import { css } from '@emotion/react';

function App() {
  return (
    <div css={css`background-color: red`}>
      Hello, tester.
    </div>
  );
}

export default App;

我把jsxImportSource加到tsconfig.json上：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  },
  "include": [
    "src"
  ]
}

然而，css prop不起作用（元素没有样式化，我得到上面的消息作为DOM属性的值）：

您可以在my test repo on Github上检查此设置。我相信我已经遵循了the instructions，但也许我错过了一些东西。先谢谢你了！