迁移到 monorepo 结构后，Styled-jsx 打字稿错误。类型“DetailedHTMLProps”上不存在属性“jsx”

Question

我在我的项目中使用 styled-jsx ，我只是将其迁移到 monorepo 结构，从那时起我一直遇到以下问题：

   Type '{ children: string; jsx: true; }' is not assignable to type 
   'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.
   Property 'jsx' does not exist on type 
   'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.ts(2322)

每次我使用 style-jsx 的默认标签时，它都会出现在 jsx 属性下：

    <style jsx>
        {`...`}
    </style>

我发现了有关此主题的已关闭问题，根据此链接，如果我手动将以下两行添加到interface HTMLAttributesin中，则可以解决此问题react/index.d.ts：

    jsx?: boolean;
    global?: boolean;

这实际上解决了问题，但我不想手动修改node_modules.

根据 vercel 中的这个已关闭问题，我应该能够通过简单地运行来解决这个问题yarn add -D @types/styled-jsx，但这不起作用。

使用 npm 而不是yarn 安装包也解决了这个问题，但我不想更改我正在使用的包管理器。此外，使用 npm 安装此一个包并使用 Yarn 安装其他包会导致应用程序崩溃。

我认为这可能是与纱线工作空间相关的提升问题styled-jsx，但添加

    "private": true,
    "nohoist":["**/styled-jsx","**/styled-jsx/**"]

到我的根 package.json 和使用 styled-jsx 的项目的 package.json 也没有解决问题。

有没有人有解决这个问题的方法，而不涉及手动修改react/index.d.ts、更改我的包管理器或放弃 monorepo 结构？

package.json使用的项目的styled-jsx：

    {
    "name": "with-typescript",
    "version": "1.0.0",
    "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc",
    "lint": "eslint **/**",
    "lint:fix": "eslint **/** --fix",
    "test": "NODE_ENV=test jest --passWithNoTests --watch",
    "test:ci": "NODE_ENV=test jest --passWithNoTests"
    },
    "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@types/styled-jsx": "^2.2.8",
    "axios": "^0.21.1",
    "dotenv": "^8.2.0",
    "firebase": "^8.2.4",
    "firebase-admin": "^9.4.2",
    "formidable": "^1.2.2",
    "global": "^4.4.0",
    "isomorphic-unfetch": "3.0.0",
    "jest": "^25.2.1",
    "js-cookie": "^2.2.1",
    "next": "^10.0.5",
    "path": "^0.12.7",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.2.0",
    "styled-components": "^5.2.1",
    "styled-jsx": "^3.4.1"
    },
    "devDependencies": {
    "@types/formidable": "^1.0.32",
    "@types/js-cookie": "^2.2.6",
    "@types/node": "^12.12.21",
    "@types/react": "^16.9.16",
    "@types/react-dom": "^16.9.4",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "@types/styled-jsx": "^2.2.8",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "eslint": "^7.18.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^1.18.2",
    "typescript": "3.7.3"
    },
    "license": "ISC"
    }

我的根文件夹package.json的：

    {
    "name": "next_shsc",
    "version": "1.0.0",
    "main": "index.js",
    "private":true,
    "repository": "https://github.com/agaragon/next_shsc.git",
    "author": "aragon <andregaragon@gmail.com>",
    "license": "MIT",
    "workspaces":{
    "packages": [
      "packages/*"
    ]
    }
    }

Answer 1

这个解决方案为我解决了这个问题（在 GitHub 上的 @smeijer之后）：

创建一个TypeScript 声明文件，命名为custom.d.ts：

import 'react';

declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

将其放置在项目中的某个位置，例如/src/typings文件夹中。它应该由编译器自动选择，但它可能取决于配置（？）。

如果您eslint在抱怨该import 'react'行时遇到错误，请在其上方添加以下注释：

// eslint-disable-next-line react/no-typos` 

Answer 2

安装这个@types/styled-jsx包对我来说不起作用——它是类型的存根，styled-jsx现在包括它们自己的类型。

阅读 styled-jsx github 上的文档，有一个具体的解决方案： https: //github.com/vercel/styled-jsx#typescript

在我的下一个应用程序的根目录中添加一个名为的文件styled-jsx.d.ts并将其放入其中对我有用：

/// <reference types="styled-jsx" />