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

ygya80vv 于 2023-04-22 发布在 TypeScript

关注(0)|答案(5)|浏览(394)

我最近决定把我的代码库从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.jsoncompilerOptions看起来像这样：

"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属性的类型？

typescript

来源：https://stackoverflow.com/questions/70127482/error-ts2322-property-css-does-not-exist-on-type-detailedhtmlpropshtmlattri

5条答案

按热度按时间

lrl1mhuk1#

使用以下代码创建styledComponentsOverride.d.ts：

import { CSSProp } from 'styled-components'

interface MyTheme {}

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

这将使用可选的CSS属性扩展react元素属性类型
更多信息：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245

赞(0）回复(0）举报 2023-04-22

xkftehaa2#

为什么不将这一行添加到'style.d.ts'文件中呢？

import {} from 'styled-components/cssprop'

赞(0）回复(0）举报 2023-04-22

kgsdhlau3#

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

import { CSSProp } from "styled-components";

interface DefaultTheme {}

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

除了您提供的链接，此issue也可能帮助其他人。

赞(0）回复(0）举报 2023-04-22

gab6jxml4#

我用了一种类似的方法，但略有不同。我在src/theme文件夹中添加了一个样式化的.d.ts文件。如果你不使用主题，你也可以直接把它放在src文件中。
然后我在这个文件中添加了以下代码：

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

来源

赞(0）回复(0）举报 2023-04-22

pzfprimi5#

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

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

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

赞(0）回复(0）举报 2023-04-22

我来回答

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

5条答案

相关问题

热门标签

最新问答