我最近決定將我的代碼庫從 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屬性型別的正確方向嗎？
uj5u.com熱心網友回復：
styledComponentsOverride.d.ts使用以下代碼創建：
import { CSSProp } from 'styled-components'
interface MyTheme {}
declare module 'react' {
interface Attributes {
css?: CSSProp<MyTheme>
}
}
這將使用可選的 CSS 道具擴展反應元素屬性型別
更多資訊：https : //github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
uj5u.com熱心網友回復：
謝謝@jkaczmarkiewicz！這很好用。將其更新為：
import { CSSProp } from "styled-components";
interface DefaultTheme {}
declare module "react" {
interface HTMLAttributes<T> extends DOMAttributes<T> {
css?: CSSProp<DefaultTheme>;
}
}
除了您提供的鏈接之外，此問題也可能對其他人有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368258.html
上一篇：在TypeScript中使用`useContext`-輸入“MyType”null`不可分配給型別“MyType”