[Q&A] Next.jsで動的にCSSを切り替えたい

Next.jsで動的にCSSを切り替えたい

解決したいこと

Next.jsを用いて、webアプリケーションを作成しております。
そこで、URLに応じて動的にCSSを切り替えたいと思い、下記のようなコードを試しましたが、意図した挙動になりません。アドバイスをいただけると幸いです。

Next.js 13.1.2
React 18.2.0

試したコード

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

type LayoutProps = {
  children: React.ReactNode;
};

const Layout = ({ children }: LayoutProps) => {
  const router = useRouter();
  const pattern = new RegExp("^/path/[0-9]{1,}", "gi");

  return (
        <main
              className={`${
              pattern.test(router.asPath) ? "" : "ml-44"
            } flex-grow`}
          >
            {children}
        </main>
  );
};

export default Layout;

意図している挙動

pattern.test(router.asPath)の値によって、ml-44の切り替えを行う。

エラー内容

new RegExp("^/path/[0-9]{1,}", "gi")の正規表現パターンにマッチしたURLへ遷移してもpattern.test(router.asPath)の値がfalseになってししまう。

1Answer

@sinsky posted at 2023-02-10

動きそうですけどね。。。
conosle.logとかでpattern.test(router.asPath) がマッチしているのか、router.asPath の値はどうなっているのかとかは確認されました？

pattern.test(router.asPath)の値がfalseになってししまう。

具体的にどのようなURLにアクセスしましたか？

あとそもそも確認方法の前提として、classがあることをdevtoolを開いて確認されましたか？
それともStyleが適応されているかだけで確認されましたか？

後者のStyleだけの判断の場合、そのCSSがちゃんと適応されているかは確認されましたか？
↓pathに関わらず適応されているかを確認する例
<p className="ml-44">example</p>

Comments

@dfgsdgfsd
Questioner
ご回答いただきありがとうございます。pattern.test(router.asPath)がマッチすることは確認できております。URLは/path/1のようなものです。classが適用されており、スタイルの変更もできていることを、devtoolを用いて確認しています。
@dfgsdgfsd
Questioner
先ほど、pattern.test(router.asPath)の部分をnew RegExp("^/path/[0-9]{1,}", "gi").test(router.asPath)のように書き直すと、意図した挙動になりました。ですが、理由は不明のままです。
@sinsky
そもそも`/path/1`の場合だと、
パターンにマッチするため、`ml-44`のスタイルは適用されないのでは？
@sinsky
`["/path/bar","/path/123"]`のようなパス例でテストしてみましたが、
`<main className={`${pattern.test(router.asPath) ? "" : "ml-44"} flex-grow`}>{children}</main>`でやっていますが、
特に問題なく正規表現とクラスは指定した挙動の通りに動作します...
@dfgsdgfsd
Questioner
ご指摘の通り、「パターンにマッチした時に”m-44"というスタイルを適用させない」というのが意図している挙動です。
@sinsky
一度、`const isMatch = pattern.test(router.asPath)`などで
HTMLに描画される前に評価してみてはいかがでしょうか。
@dfgsdgfsd
Questioner
試してみたのですが、やはりマッチ結果自体に問題はないようです…。constで変数に代入した時とそうでない時に挙動が変わるため、原因を突き止めたいと思います。ご助言に感謝いたします。
@sinsky
なるほど。。。
すみません、私では力不足のようです🙇
@dfgsdgfsd
Questioner
ご対応に感謝申し上げます。
@kage1020
Next.jsと関係ないんですけど，Tailwind CSSを使っている場合にはスタイルをテンプレートリテラルの中で動的に変更することはできません．
<main className={"flex-grow" + pattern.test(router.asPath) ? "" : "ml-44"}>{children}</main>
@sinsky
それは違うと思います。TailwindCSSにテンプレートリテラルは関係なく、クラス名を完全に記載している場合は生成されます。
逆に生成されないのは下記のように、テキストの色の部分だけを動的に変えているような場合です。
<p className={`${true ? "text-green-400" : "text-red-400"}`}>生成されるパターン</p> <p className={`text-${true ? "green" : "red"}-600`}>生成されないパターン</p>