如何在 React 和 TypeScript 中的 style 属性中定义 css 变量

小能豆

如何在 React 和 TypeScript 中的 style 属性中定义 css 变量

javascript

我想像这样定义 jsx：

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

并且我--length在 CSS 中使用，我也有--count使用 CSS 伪选择器（使用计数器黑客）显示计数的单元格。

但 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 变量（自定义属性）或者是否有办法强制执行样式对象上的任何操作？

阅读 31

2024-06-10

共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} />
}

2024-06-10