使用 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 ，因此在滿足此條件時將添加兩個類。