5

我在我的项目中使用 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 HTMLAttributes，如果我手动添加以下两行到in ，这个问题可以解决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/*"
    ]
    }
    }
4

1 回答 1

3

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

创建一个TypeScript 声明文件，命名为 eg 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`
于 2021-08-26T00:18:24.747 回答