如何在 React 和 typescript 的样式属性中定义 css 变量

发布于08月25日

我想这样定义jsx:

<table style={{'--length': array.lenght}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

我在CSS中使用了--length，我还有一个单元格，有--count，它使用CSS伪 Select 器(使用计数器hack)显示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变量(自定义属性)，或者是否有方法强制样式对象使用任何样式属性？

推荐答案

如果你go definition of CSSProperties，你会看到:

export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You're able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
}

该链接给出了如何通过在csstype中增加Properties的定义或将属性名强制转换为any来解决类型错误的示例.