classNamesでReactのスタイリング

3515 ワード
React CSS CSS テキストリンク

はじめに

現在Reactについて勉強中なのですが、classNameを複数個宣言する方法がわからず調べたことを残しておきます(記録用)。classnamesというモジュールはとりあえずインストールしてていい気がしますね。

classNameとは

Reactではjsx形式を扱いますが、classNameはそこでスタイリングを担当します。htmlで言うところのclassです。

classNameの使い方

divタグにclassName={color_red}を与え、文字を赤色に装飾することができます。htmlを触ったことがある人は理解しやすいと思います。

export default Hello world!(() => {
  return (
    <div className={color_red}>
      <h1>Hello world!</>
    </div>
  );
});

classNamesの宣言方法

では、classNamesと複数形で宣言する場合はどうなるのでしょうか？
* まず、npm install --save classnamesでインストールが必要です(これを知らず困った)。
* インストール完了後、ファイルにインポートします。
* 以下のように、classNamesを使うと、複数のクラス名を定義して使うことができます。useStateなどと合わせて、複数の状態を変化させたい場合などに便利です。

import React, { useState } from "react";
import classNames from "classnames";

export default Hello world!　()　=> {
  return (
    <div className={classNames("signUp", "open")}>
      <h1>Hello world!</h1>
    </div>
  )
}

複数のクラス名を付けたい

classNamesを使うことで複数のクラス名を扱うことができます。

import React, { useState } from "react";
import classnames from "classnames";

export default App() => {
  return (
    <>
      <div className={classnames("signIn", "isOpen")}>
        <h1>Hello world!</h1>
      </div>
    </>
  );
}

動的切り替え

useStateを使い、ハンバーガーを食べている状態のスタイリングを変えたいとします。
このとき、statusをsetStatusで切り替えることによって、statusClassNamesが変化させられます。
classNameを、"eating"なのか"finished"なのかに切り替えられるというわけです。
※classNameは別途自分で設定する必要がある(ex. eating時のスタイリング、finished時のスタイリング)。

import React, { useState } from "react";
import classnames from "classnames";

export default function App() {
  const [status, setStatus] = useState("eating");
  const statusClassNames = {
    hamburger: true,
    eating: status === "eating",
    finished: status === "finished"
  };

  return (
    <>
      <div className={classnames(statusClassNames)}>
        <h1>A man who likes hamburger in a restaurant</h1>
      </div>
    </>
  );
}

classNamesを使うことで、簡単に動的なスタイリングができます。useStateによる状態管理ができれば、スタイリングの変更も自由自在ですね。

参考にした資料

・Reactのスタイリング(classNameやclassNamesの使い方)
https://qiita.com/terry_6518/items/de53123253cf67e048b3

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

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

Condition
Doubleタイプが等しいかどうかをどう判断するかについて