样式-在迁移到monorepo结构后的jsx类型记录错误。属性'jsx‘在'DetailedHTMLProps’类型上不存在

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)

每当我使用样式的默认标记时，jsx属性下都会出现这种情况：

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

我找到了一个关于这个主题的封闭式发行，根据这个链接，如果我手动将以下两行添加到react/index.d.ts中的interface HTMLAttributes中，这个问题就可以解决

    jsx?: boolean;
    global?: boolean;

这实际上解决了问题，但我不想手动修改node_modules中的文件。

根据vercel中的这个封闭式发行，我应该能够通过简单地运行yarn add -D @types/styled-jsx来修复这个问题，但是这是行不通的。

使用npm而不是纱线安装软件包也解决了问题，但我不想改变我正在使用的软件包管理器。另外，用npm安装这一个软件包，用纱线安装其他组件会使应用程序崩溃。

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

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

对于我的根package.json和使用样式-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

这个解决方案为我解决了这个问题(在@smeijer at GitHub之后)：

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

import 'react';

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

将它放在项目的某个地方，例如在/src/typings文件夹中。编译器应该自动获取它，但是它可能依赖于config (?)。

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

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

Answer 2

安装@types/styled-jsx包对我来说不管用--它是类型的存根，因为styled-jsx现在包括了它们自己的。

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

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

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

Answer 3

我正在使用Next 12.1.6，在安装@types/styled-jsx 3.4.4之前一直存在这个问题。

我认为这是一个更好的方法。