Reactのスタイリング(classNameやclassNamesの使い方)

こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら

また、未経験から独学でフロントエンドエンジニアになる勉強方法をまとめたので、興味があれば是非！

修正

221/1/12 12:30頃にclassnamesの記述とコードブロックの修正を加えました。それ以前は誤った記述になっていたので、現状を参考にしてください。

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における様々なスタイリングを行うことが出来ます。

もし現状の仕事に不満があるなら

転職ドラフトに登録して見てはいかがでしょうか？

実際に企業からのオファーを受ける事で、企業から見た自分の強みや市場価値などポジティブな発見がたくさんあります！！

参考

・React公式ドキュメント(CSS とスタイルの使用)
https://ja.reactjs.org/docs/faq-styling.html

・classnamesパッケージドキュメント
https://www.npmjs.com/package/classnames