Reactでstyleをinlineで書くときの注意点
tl;dr
Reactでinlineでstyleを書く時
font-sizeなどpropertyの名前に - が含まれる場合
style={ font-size: "16px" }
↑は動きません
style={ fontSize: "16px" }
↑は動きます
困っていたこと
Reactで要素の中に直接styleを定義しようとしていました
Titleと言う文字のfontの大きさを20pxにしようと思います
<label style={ { font-size: "20px" } }>Title</label>
完璧ですね
しかしconsoleには
Unexpected token, expected ","
ん、そんなわけなくない？
font-sizeのfontの後にカンマがくると怒られるんですがカンマ書くわけない、、
typoかなとも思ってよく確認したんですが特にミスってるところも見つかりませんでした
解決策
そもそもpropertyの名前がfont-sizeではなかった、、、
こちらが正しい書き方です
<label style={ { fontSize: "20px" } }>Title</label>
このページに対応表があります
Reactがっていうわけでなく、JavaScriptでCSSを書くときのルールのようですね
ちなみにReactでsize指定する時はpxを書かなくても自動でpxになります
<label style={ { fontSize: "20px" } }>Title</label>
// どっちも同じ
<label style={ { fontSize: "20" } }>Title</label>
数字を書いておけば自動でpxと判断されるpropertyのリストです
忘れがちですけどReactで書いてるのはHTMLではなくJSXなんだということを再認識させられました
