错误 TS2322：属性 'css' 在类型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' 上不存在

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

扩展反应元素属性类型

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

Answer 2

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

import { CSSProp } from "styled-components";

interface DefaultTheme {}

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

除了您提供的link之外，这个issue也可能对其他人有帮助。

Answer 3

为什么不直接在 'style.d.ts' 文件中添加这一行？

import {} from 'styled-components/cssprop'

错误 TS2322：属性 'css' 在类型 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' 上不存在

error TS2322: Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

typescript

reactjs

styled-components