错误 TS2322：类型"详细 HTML <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.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属性类型的正确方向吗？

Answer 1

创建包含以下代码的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

Answer 2

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

import {} from 'styled-components/cssprop'

Answer 3

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

import { CSSProp } from "styled-components";
interface DefaultTheme {}
declare module "react" {
interface HTMLAttributes<T> extends DOMAttributes<T> {
css?: CSSProp<DefaultTheme>;
}
}

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

Answer 4

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

import type { SerializedStyles } from "@emotion/serialize";
import type { DOMAttributes } from "react";
declare module "react" {
interface HTMLAttributes<T> extends DOMAttributes<T> {
css?: SerializedStyles;
}
}

Answer 5

我用类似但略有不同的方式完成了这项工作。我在src/theme文件夹中添加了一个style.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组件-带类型脚本-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>;
}
}