错误 TS2322：类型“DetailedHTMLProps<HTMLAttributes<HTMLDivElement>，HTMLDivElement>”上不存在属性“css”

Question

我最近决定将我的代码库从 JS 移至 TS 以添加类型检查。我还使用

styled-components

库。

但是，我遇到了以下问题：

error TS2322: Type '{ children: string; css: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

这是一个基本的代码示例：

import React from 'react'
const MyComponent: React.FC = (props) => {
    return (
        <div css={`
            padding: 44px;
        `}>
            My content
        </div>
    )
}

请注意我的

tsconfig.json

compilerOptions

看起来像这样：

"compilerOptions": {
        "composite": true,
        "declaration": true,
        "outDir": "./dist", // https://www.typescriptlang.org/tsconfig#outFile
        "rootDir": "./src",
        "jsx":"react",
        "types": ["@types/styled-components"],
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        
        "declarationMap": true,
        "noEmitOnError": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "noUnusedLocals":true,
        "noUnusedParameters":true,
        "allowJs":true,
        "noEmit": false
    }

任何人都可以为我指出正确的方向来解决

css

属性的类型吗？

Answer 1

创建

styledComponentsOverride.d.ts

，其中包含以下代码：

import { CSSProp } from 'styled-components'

interface MyTheme {}

declare module 'react' {
    interface Attributes {
       css?: CSSProp<MyTheme>
    }
}

这将使用可选的 CSS prop 扩展 React 元素属性类型

更多信息：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245

Answer 2

为什么不在“style.d.ts”文件中添加这一行？

import {} from 'styled-components/cssprop'

Answer 3

如果有人在使用 emotion 时遇到此问题，请参阅等效的类型声明模块：

import type { SerializedStyles } from "@emotion/serialize";
import type { DOMAttributes } from "react";

declare module "react" {
    interface HTMLAttributes<T> extends DOMAttributes<T> {
        css?: SerializedStyles;
    }
}

Answer 4

谢谢@jkaczmarkiewicz！这很好用。更新为：

import { CSSProp } from "styled-components";

interface DefaultTheme {}

declare module "react" {
   interface HTMLAttributes<T> extends DOMAttributes<T> {
     css?: CSSProp<DefaultTheme>;
   }
 }

除了您提供的链接之外，这个问题也可能对其他人有帮助。

Answer 5

我以类似但略有不同的方式做到了这一点。我在 src/theme 文件夹中添加了一个 styled.d.ts 文件。如果您不使用主题，也可以直接将其放入 src 文件中。

然后我在这个文件中添加了以下代码：

import { CSSObject } from 'styled-components';
import { CSSProp } from 'styled-components';
declare module 'react' {
  interface Attributes {
    css?: CSSProp | CSSObject;
  }
}

来源

• https://medium.com/@luxtars.dev/use-styled-components-with-typescript-73b703261d9e
• https://dev.to/rajuashok/create-styled-d-ts-to-make-typescript-work-with-styled-components-5dk4

Answer 6

在情感上你可以创造以下内容

cssTypes.d.ts

import { Interpolation } from '@emotion/react';

interface DefaultTheme {}

declare module 'react' {
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: Interpolation<DefaultTheme>;
  }
}

Answer 7

当您尝试在 TypeScript 项目中使用 css prop 而不正确设置样式库的类型时，通常会出现错误““DetailedHTMLProps”类型上不存在属性“css””。

您可以采取以下一些步骤来解决此问题：

更新您的 TypeScript 配置

如果您使用的是 Emotion 或 Styled Components 这样的库，则需要在 TypeScript 配置中包含它们的类型。例如，如果您使用 Emotion，则可以将“@emotion/react”添加到您的

中的类型数组中

tsconfig.json

文件：

{
  "compilerOptions": {
    "types": ["@emotion/react"]
  }
}

在类型声明文件中声明 CSS Prop

您可以在类型声明文件中声明 css prop

(.d.ts)

。这告诉 TypeScript 所有 HTML 元素上都存在 css 属性。以下是如何执行此操作的示例：

import { CSSProp } from 'styled-components'

declare module 'react' {
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: CSSProp;
  }
}

在此代码中，CSSProp 是从 styled-components 导入的，并且 css prop 是从 React 添加到 HTMLAttributes 接口中的。

重新安装依赖项

如果在更新 TypeScript 配置并声明 css prop 后仍然遇到问题，则可能需要重新安装依赖项。您可以通过删除node_modules文件夹并再次运行npm install或yarn install来完成此操作。

更新您的 TypeScript 版本

如果您使用 React 17 中引入的新 JSX 转换，您可能需要将 TypeScript 版本更新到 4.1 或更高版本。此版本的 TypeScript 包含对新 JSX 转换的支持。

通过执行这些步骤，您应该能够解决 TypeScript 项目中的“类型‘DetailedHTMLProps’上不存在属性‘css’”错误。如果您仍然遇到问题，请提供有关您的代码以及您使用 css 属性的上下文的更多详细信息，我很乐意提供进一步的帮助。