DOM style プロパティ
backgroundColorelement.style.backgroundColor = valueCSS Property to camelCase Converter
ハイフン区切りの CSS プロパティを DOM style object と React で使う JavaScript 名へ変換します。vendor prefix、float、custom property は通常の kebab-case 変換とは別の CSS 固有ルールで処理します。
React style キー
backgroundColorstyle={{ backgroundColor: value }}通常の CSS プロパティは、DOM style object と React style prop で同じ camelCase 名になります。
変換はブラウザ内で実行されます。
CSS 固有の変換ルール
すべてを単純な kebab-case として扱わず、CSSOM と React style object の命名規則に従います。
- background-color のような標準名は backgroundColor になります。
- --brand-color のような custom property は brandColor に変えず、そのまま保持します。
- CSS の float は DOM style object では cssFloat、React では float として扱います。
- vendor prefix は DOM の webkitLineClamp と React の WebkitLineClamp のように環境別の大小文字を使います。
element.style の読み書きでスタイルシート上のプロパティ名を JavaScript 名へ変換。
custom property を誤変換せずに React inline style 用のプロパティ名を準備。