如何在 React 中使用帶有動態類別名稱的 Tailwind CSS？

將 Tailwind CSS 與動態類別名稱結合使用

使用 React 和 Tailwind CSS 時，可能很容易將動態值（例如上下文變數）作為類別名稱傳遞。然而，Tailwind 對類別名稱有一個特定要求，即類別名稱必須是完整的、不間斷的字串。因此，簡單地傳遞一個插入到 className 中的變數將無法如預期般運作。

Tailwind 的文檔明確指出，「如果您使用字串插值或將部分類別名稱連接在一起，Tailwind 將找不到它們，因此將不產生相應的CSS。」

解決方案：使用完整的類別名稱

要有效地使用Tailwind 與動態值，它使用完整的值集定義類別名稱至關重要。例如，不要使用：

<p className={`bg-[${colors.secondary}] text-text-white`}></p>

直接在ThemeContext 中定義類別：

const colors = {
  // …
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // …
};

然後在組件中使用它，如下所示：

<p className={`${colors.secondary} text-text-white`}></p>

替代方案：使用內聯樣式

如果定義完整的類別名稱不可行，您也可以使用style屬性來應用動態樣式：

<p className="text-text-white">

這種方法在處理動態值時提供了更大的靈活性，但需要使用內聯樣式。

以上是如何在 React 中使用帶有動態類別名稱的 Tailwind CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！