使用 classNames 和 Tailwind 激活时渲染特定的 className

Question

我正在使用Tailwinds CSS和classNames包。

我正在渲染 2 个div并且我想检查其中一个是否有active类，然后为其设置特定的背景颜色 className bg-[#000] 。

• 我尝试使用'bg-[#000]': 'active' check 但这只是在所有元素上插入背景颜色。

我们如何使用Tailwind和classNames为活动元素设置特定样式？

谢谢！

截图：

这是标签的屏幕截图，第一个当前处于活动状态。 但是第二个不活跃的也有bg-[#000]类。

代码：

list.map((page, index) => {
  return ( 
  <div 
    key = {index}
    onClick = {() => setCurrentListIdx(index)}
    className = {
      classNames('bullets__item m-1.5 h-2 w-2 cursor-pointer rounded-full bg-[#e0e0e0]', 
      {
        active: currentListIdx === +index,
        'bg-[#000]': 'active',
       }
      )}
    ></div>
  )
})

Answer 1

在条件'bg-[#000]': 'active'中，您传递的是字符串'active'而不是要评估的变量或表达式。 这将返回true ，因为 JS 字符串是真实的，因此总是添加类。 classNames实用程序似乎不允许以这种方式检查其条件对象中当前应用的类名。

您也可以对两个类名使用相同的条件： currentListIdx === +index ，因此在满足此条件时将添加两个类。