今日、うっかり書き方を間違えたので、備忘録としてまとめます。
React のコンポーネントにスタイルを適用するときの書き方についてです。
エラーが発生した時に、React が誘導してくれたページはこちら。
React – Error Decoder
https://reactjs.org/docs/error-decoder.html/?invariant=62&args[]=
このページの最下部に、下記のように style プロパティの書き方についての記述がありました。
The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + ‘em’}} when using JSX.
私はうっかり、HTML と同じ書き方で下記のように指定してしましたが、React ではこの書き方ではだめです。
<div style='padding-top: 10px;'>
<p>テキスト</p>
</div>
下記のように記述するのが正解です。
<div style={{paddingTop: '10px'}}>
<p>テキスト</p>
</div>
なお、React では、padding-top ではなく、paddingTop というように、キャメルケースで記述します。
また、複数のプロパティを指定したい場合は、カンマ区切りで記述します。
若干普通の CSS とは指定の仕方が異なりますが、プロパティ名なんかは同じなので、それほど悩むことはないと思います。
強いて言えば、中かっこが2重になっていることに注意するくらいでしょうか。
以上、React のコンポーネントにスタイルを適用する方法でした。
今後もうっかり書き間違えないように気をつけたいと思います。
