classNameとは
htmlではclassを使ってスタイリングをしますが、Reactが使っているjsxではclassNameを使ったスタイリングを行います。
classNameの使い方
classNameの使い方は簡単で、classと全く同じです。
export default function App() { return ( <div className={App}> <h1>Hello CodeSandbox</h1> </div> ); }今回はAppを入れましたが、変数などを入れることも可能です。
classNames
動的なクラスの使い分けをする場合や複数のクラス名をつける場合はclassNamesというnpmパッケージを使うと便利です。
https://www.npmjs.com/package/classnames#usage-with-reactjs
基本的な使い方
今回はfoobarClassNamesで定義しています。オブジェクトの値がfalseだとそのkeyとなるclass名は付与されません。
よって今回はfooのみがクラス名として与えられています。
import React from "react"; import classNames from "classnames"; export default function App() { const foobarClassNames = { foo: true, bar: false }; return ( <div className={classNames(foobarClassNames)}> <h1>Hello CodeSandbox</h1> </div> ) }複数のクラス名を使う
classNamesを使うことで複数のクラス名を手軽に使えます。
import React, { useState } from "react"; import classnames from "classnames"; export default function App() { return ( <> <div className={classnames("login", "isActive")}> <h1>Hello CodeSandbox</h1> </div> </> ); }loginとisActiveが付与されています。
動的にクラス名を切り替える。
下記の画像ではuseStateによって定義されたstatus（progressかcreared）によってstatusClassNamesの値が切り替わる例です。
常にpazzleクラスは持っています。
import React, { useState } from "react"; import classnames from "classnames"; export default function App() { const [status, setStatus] = useState("progress"); const statusClassNames = { pazzle: true, progress: status === "progress", creared: status === "creared" }; return ( <> <div className={classnames(statusClassNames)}> <h1>Hello CodeSandbox</h1> </div> </> ); }classNamesを使うことで、Reactにおける様々なスタイリングを行うことが出来ます。