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
*/
}
の定義を拡張することでタイプエラーを解決する方法の例がそのリンク先にあります。
Properties
で
csstype
にキャストするか、プロパティ名を
any
.
関連
-
[解決済み】React Propsが定義されていません。
-
[解決済み] ReactJS giving error Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] ReactJsのCreateClassは関数ではない
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] componentDidUpdate'メソッドはいつ使用するのですか?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] TypeScriptでの取得と設定
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】プリセットファイルはオブジェクトのエクスポートができない
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] Angular 2の*ngForのReactでの同等品
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する