classNameとは
htmlではclassを使ってスタイリングをしますが、Reactが使っているjsxではclassNameを使ったスタイリングを行います。
classNameの使い方
classNameの使い方は簡単で、classと全く同じです。
今回はAppを入れましたが、変数などを入れることも可能です。
classNames
動的なクラスの使い分けをする場合や複数のクラス名をつける場合はclassNamesというnpmパッケージを使うと便利です。
https://www.npmjs.com/package/classnames#usage-with-reactjs
基本的な使い方
今回はfoobarClassNamesで定義しています。オブジェクトの値がfalseだとそのkeyとなるclass名は付与されません。
よって今回はfooのみがクラス名として与えられています。
複数のクラス名を使う
classNamesを使うことで複数のクラス名を手軽に使えます。
loginとisActiveが付与されています。
動的にクラス名を切り替える。
下記の画像ではuseStateによって定義されたstatus（progressかcreared）によってstatusClassNamesの値が切り替わる例です。
常にpazzleクラスは持っています。
classNamesを使うことで、Reactにおける様々なスタイリングを行うことが出来ます。
参考
・React公式ドキュメント(CSS とスタイルの使用)
https://ja.reactjs.org/docs/faq-styling.html
・classnamesパッケージドキュメント
https://www.npmjs.com/package/classnames
フリーランスでフロントエンドエンジニアをしています。
お仕事のご相談こちらまで
gunners6518@gmail.com