😽
React(TypeScript)でCSS変数を定義する時のエラー
こんにちは。
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