NextJSで動的にCSSクラスを変更する方法

CSSのクラスを動的に変更したい

divタグで作成したボタンのスタイルをクリックした状態とクリックしてない状態でスタイルを変更しなければいけない状況があったので、その時にNextJSで動的に変更した方法をご紹介いたします。

はっきり言ってNextJS関係なく出来ますが、今回はNextJSのuseStateを使用して実装しました。

export default function Component() {
    const [isModal, setIsModal] = useState(false);
    const contentClassname = isModal
        ? `${styles["nav-open"]} ${styles.ModalContainer}`
        : styles.ModalContainer;

    return (
        <div>
            <p onClick={() => setIsModal(!isModal)}>Menu</p>
            <div className={contentClassname}>Content</div>
        </div>
    );
}

こんな感じのコードとなります。

stateの状態によってクラスが適用されているかが変わっていますね。

適用するクラスの中身をstateによって変更している感じです。

html内のclassを変えるよりも綺麗な方法だと思うので、同じような悩みを持っていた方の参考になれば幸いです。

次回はNextJSでなくてもできるJavascriptを使ったクラスの指定を変えてやる動的な変更方法をご紹介します。

短い記事じゃないと書けないんよ。。。すみません。。。