😽

React(TypeScript)でCSS変数を定義する時のエラー

2023/01/22に公開

React

TypeScript

tech

こんにちは。

React(TypeScript)の勉強のために本を買ったらTypeScriptではなく、JavaScriptだったので、仕方なくTypeScriptに変換して勉強中です。

エラー内容

css変数(カスタムプロパティ)を使用して、高さを動的に変更する処理がありました。
その処理を写経したところ、下記のようなエラーが発生しました。

型 '{ '--text-height': string; }' を型 'Properties<string | number, string & {}>' に割り当てることはできません。
オブジェクトリテラルは既知のプロパティのみ指定できます。''--text-height'' は型 'Properties<string | number, string & {}>' に存在しません。

コードは下記です。

<div 
  className={styles.text}
  ref={refText}
  style={{
    '--text-height': refText.current
      ? `${refText.current.scrollHeight}px`
      : '0px',
   }}
>

refTextはuseRefで作成したrefオブジェクトでdiv要素に紐づけています。
これで要素の高さを取得して、動的に高さを変更しようとしています。

画面側で確認すると、特に問題ないのですが、コード上ではエラーとなっています。

解決方法

型のアサーションを追加してあげれば解決しました。

{['--css-変数名' as any]: value}

上記で型のアサーションを指定できるので、今回の場合はこんな感じ

<div 
  className={styles.text}
  ref={refText}
  style={{
    ['--text-height' as any]: refText.current
      ? `${refText.current.scrollHeight}px`
      : '0px',
   }}
>

型をとりあえずanyにしてるけど、いいのかな。。？

エラー内容

解決方法

Discussion