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

Question

我想这样定义 jsx:

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

我在 CSS 中使用 --length，我还有一些单元格有 --count 显示使用 CSS 伪选择器(使用计数器 hack)的计数。

但是 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 变量(自定义属性)，或者有没有办法强制任何样式对象？

Answer 1

像这样:

function Component() {
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}

或者没有额外的 style 变量:

function Component() {
  return <div style={{ "--my-css-var": 10 } as React.CSSProperties} />
}