我想这样定义jsx:
<table style={{'--length': array.lenght}}>
<tbody>
<tr>{array}</tr>
</tbody>
</table>
我在CSS中使用了--length,我还有一些单元格使用了--count,它使用CSS伪选择器显示count(使用计数器技巧)。
但typescript抛出错误:
TS2326: Types of property 'style' are incompatible.
Type '{ '--length': number; }' is not assignable to type 'CSSProperties'.
Object literal may only specify known properties, and ''--length'' does not exist in type 'CSSProperties'.
是否有可能更改样式属性类型以接受CSS变量(自定义属性),或者是否有办法强制样式对象接受CSS变量?
8条答案
按热度按时间xpcnnkqh1#
您可以将类型Assert添加到变量中。* 即 *
{['--css-variable' as any]: value }
omvjsjqw2#
将
style
转换为any
会破坏使用TypeScript的全部目的,因此我建议使用自定义属性集扩展React.CSSProperties
:通过扩展
React.CSSProperties
,您将使TypeScript的属性检查保持活动状态,并且将允许您使用自定义的--length
属性。使用
MyCustomCSS
的方式如下所示:mitkmikd3#
您可以简单地将此模块声明merge使用字符串模板放在文件的顶部或任何.d.ts文件中,然后您将能够使用任何CSS变量,只要它以'--'开头,并且是字符串或数字
例如,
uubf1zoe4#
将其放入您global.d.ts文件中
ztigrdn85#
我想通过使用
document.body.style.setProperty
来添加一种不同的方法,如果您的css变量会受到某些属性的影响,您可以将其放在useEffect
中,如下所示:稍后在css文件中,您可以这样调用它:
ruarlubt6#
尝试:
xdyibdwo7#
就像这样:
或者不使用额外的
style
变量:jgzswidk8#
如果你转到
CSSProperties
的定义,你会看到:该链接提供了一些示例,说明如何通过扩充
csstype
中Properties
的定义或将属性名转换为any
来解决类型错误。