“继承”| “初始”| “取消设置”| “固定”| “绝对”| “静态”| “相对”| “粘性”

在我的应用程序中出现了以下错误(npm 5.4.2，response 15.4，type escript 2.5.3，webpack 2.2.1，webpack-dev-server 2.4.1)。

这将奏效:

<div style={{position: 'absolute'}}>working</div>

这将无法编译:

const mystyle = {
position: 'absolute'
}


<div style={mystyle}>not working</div>

编译错误是:

ERROR in ./src/components/Resource.tsx
(61,18): error TS2322: Type '{ style: { position: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Type '{ style: { position: string; }; children: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
Types of property 'style' are incompatible.
Type '{ position: string; }' is not assignable to type 'CSSProperties'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'.
webpack: Failed to compile.

但是有什么区别呢？ 我可以用:

const mystyle = {
position: 'absolute' as 'absolute'
}

但这是个好办法吗？

我对其他 style/css 属性没有这个问题。

我在 github 上发现了一个类似的问题: Https://github.com/microsoft/typescript/issues/11465 但如果理解正确的话，这是早期版本中的一个打印错误。

感谢你的帮助。

49119 次浏览
小开
最佳答案

这是一个变通方案，但它是正常的。 另一种解决办法是:

const mystyles = {
position: 'absolute',
} as React.CSSProperties;

你可以检查回来时，这个 问题将得到解决。大约 TS 2.6我猜，判断里程碑。

小开

使用 React.CSSProperties 类型:

import React, { CSSProperties } from "react";


const myStyles: CSSProperties = {
position: 'absolute',
}

然后就像平常一样使用这种风格:

<div style={myStyles} />
小开

如果您有嵌套样式对象，则 超人的答案不起作用。在这种情况下，您可以创建一个类型:

import React, { CSSProperties } from 'react';


export interface StylesDictionary{
[Key: string]: CSSProperties;
}

像这样使用它:

const styles:StylesDictionary  = {
someStyle:{
display:'flex',
justifyContent:'center',
},
someOtherStyle:{
display:'flex',
justifyContent:'center',
alignItems:'center',
        

}
}

然后:

<div style={styles.someStyle} />
小开

可以使用 const 断言让 TypeScript 推断整个对象的文本值:

const mystyle = {
position: 'absolute'
} as const;

这样，如果您向 mystyle添加更多的属性，它也将为它们工作。

小开

我在尝试将 wrapperHeight 字符串值(100px、10vw、100vh 等)传递给 HeroImage 组件时遇到了类似的问题。解决方案是实际上在 CSS 对象内部的值周围使用字符串文字:

interface HeroImageProps {
src: StaticImageData,
alt: string,
wrapperHeight: string,
}


export default function HeroImage({ src, alt, wrapperHeight }: HeroImageProps) {


const wrapperStyles: React.CSSProperties = {
height: `${wrapperHeight}`
}


return (
<div className={styles.heroImage} style={wrapperStyles} >
<Image
src={src}
alt={alt}
layout="fill"
priority
/>
</div>
)
}

提交答案