Как определить переменные CSS в атрибуте стиля в React и машинописи

Question

Я хочу определить jsx так:

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

и я использую --length в css, у меня также есть ячейки, в которых есть --count, показывающий счет с использованием псевдоселектора css (с использованием счетчика хака).

но ошибка отображения машинописи:

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

Как это:

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

Answer 2

Вы можете добавить утверждение типа в переменную. т.е. {['--css-variable' as any]: value }

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

Answer 3

Если вы перейдете к определению 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
     */
}

Эта ссылка дает примеры того, как решить ошибку типа, увеличив определение Properties в csstype или приведя имя свойства к any.