如何根据 Next.js 中的内容动态更新 className？

Question

我尝试根据内容动态设置颜色，例如，如果值为android背景应该是绿色，当它是ios时，它应该是蓝色。 我想为所有 Next.js 项目使用通用 function 来执行此操作（我目前使用 Tailwind CSS）。

这是通用的 function 根据内容（在本例中为帖子的标签）获取特定颜色。

export function getColor(tag) {
  switch (tag) {
    case "android":
    case "androidx":
    case "espresso":
    case "retrofit":
      return "bg-green-500"
    case "ios":
    case "facebook":
      return "bg-blue-500"
    case "angular":
    case "java":
    case "javascript":
    case "javafx":
    case "hms":
      return "bg-red-500"
    case "kotlin":
      return "bg-purple-500"
    case "firebase":
      return "bg-yellow-500"
    case "swift":
    case "swiftui":
    case "ubuntu":
      return "bg-orange-500"
  }
  return "bg-gray-500"
}

这就是我设置className的方式。

<span
  className={`text-white uppercase ${getColor(post.tags?.[0])} inline-flex items-center px-2 rounded text-sm font-semibold font-mono`}>
  {post.tags?.[0]}
</span>

显然这应该有效，但事实并非如此。 即使有时这行得通，有时也行不通。 以前我在每个需要它的文件上都有这个 function 并且它可以工作，但这不是想法。 我想为所有项目提供一个通用的 function （分隔文件）。

处理这个问题的正确方法是什么？ 还有另一种更新类名的方法吗？ 最好的方法是什么？ 非常感谢。

Answer 1

将clsx用于动态类更方便，它看起来像className={clsx('some-class', areThereData && 'some-other-class', getColor(...))} 。

可以使用console.log或者debugger语句进行调试； 可能当它不起作用时，您没有将正确的值传递给 function

Answer 2

如果在文件中包含逻辑时它正在工作，但现在没有，那么听起来包含逻辑的文件未包含在tailwind.config.js的content设置中。

尝试更新content设置以包含逻辑文件，以便 Tailwind 知道将这些 class 名称（例如bg-green-500 、 bg-blue-500等）添加到其 output ZC7A628CBA22E28EBA2617B5F5C6。