1. ホーム
  2. reactjs

Reactとtypescriptでstyle属性にcss変数を定義する方法

2023-09-20 08:10:19

質問

jsxをこのように定義したいのですが、どうすればよいでしょうか。

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

で、CSSで-lengthを使っていますが、CSSの擬似セレクタでカウントを表示する-countのセルもあります(counter 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変数(カスタムプロパティ)を受け入れるように変更することは可能でしょうか、それともスタイルオブジェクトに何も強制しない方法はありますか?

どのように解決するのですか?

もし、あなたが の定義に 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
     */
}

の定義を拡張することでタイプエラーを解決する方法の例がそのリンク先にあります。 Propertiescsstype にキャストするか、プロパティ名を any .