Reactのスタイリング(classNameや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 とスタイルの使用)

・classnamesパッケージドキュメント