ReactのclassNameを条件によって出し分ける

Reactで条件によってclassNameの値を変更する方法をメモ。

サンプルコード

まずは対応前です。
以下のようなBtn.jsxで、クリック時にスタイルを変更したいとします。

import './Btn.css'

function Btn() {
  return (
    <button className="button">ボタン</button>
  )
}

export default Btn

Btn.cssは以下の通りです。

.button {
  appearance: none;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background: purple;
  cursor: pointer;
}

対応前のデモページ

useStateでボタンの状態を管理するisCurrentを用意して、その値に応じてis-currentというclassを付与するようにします。

import { useState } from 'react'
import './Btn.css'

function Btn() {
  const [isCurrent, setIsCurrent] = useState(false);
  function handleChange() {
    setIsCurrent(!isCurrent);
  }
  return (
    <button
      className={`button ${isCurrent ? "is-current" : ""}`}
      onClick={handleChange}
    >ボタン</button>
  )
}

export default Btn

CSSで.is-currentが付与されたときのスタイルを用意します。

.button {
  appearance: none;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background: purple;
  cursor: pointer;
}
.button.is-current {
  background: tomato;
}

これで条件に応じてclassNameの値を変更することができました。
対応後のデモページ