Tailwind CSS：使用模板文字進行動態(tài)類更改

在 React 中使用條件樣式時，利用 Tailwind CSS 中的模板文字是一個強大的功能動態(tài)修改類的技術。讓我們深入探討如何有效地實現(xiàn)這一點。

問題

一些開發(fā)人員在使用模板文字有條件地更改 Tailwind CSS 中的類時遇到問題。例如，類似于以下的代碼可能無法按預期工作：

const closeNav = () => {
  setClick(!click);
};

<div className={`absolute inset-0 ${click ? "translate-x-0" : "-translate-x-full" } transform z-400 h-screen w-1/4 bg-blue-300`}></div>

解決方案

應用模板文字進行動態(tài)類更改的正確方法如下如下：

<div className={click ? "absolute inset-0 translate-x-0 transform z-400 h-screen w-1/4 bg-blue-300" : "absolute inset-0 -translate-x-full transform z-400 h-screen w-1/4 bg-blue-300"}></div>

或者，沒有模板文字：

<div className={"absolute inset-0 " + (click ? "translate-x-0" : "-translate-x-full") + " transform z-400 h-screen w-1/4 bg-blue-300"}></div>

注意事項

避免使用字符串連接來創(chuàng)建類名，因為這可能會阻礙 Tailwind 的優(yōu)化。相反，選擇選擇完整的類名稱或使用類選擇技術，如 classNames、clsx 或 Tailwind 特定的解決方案，如 twin.macro、twind 和 xwind。

其他選項

條件樣式也可以使用第三方庫（如類名或 clsx）或 Tailwind 特定的解決方案（如 twin.macro）來實現(xiàn)， twind 和 xwind。

進一步閱讀

有關更多信息，請參閱以下資源：

• [React.js 有條件應用班級名稱](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
• [如何動態(tài)添加類到手動類名？](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
• [處理條件樣式的正確方法React](https://stackoverflow.com/questions/44916340/ Correct-way-to-handle-conditional-styling-in-react)
• [在 JSX 中嵌入表達式](https://reactjs.React) org/docs/jsx-in-depth.html#embedding-expressions-in-jsx)
• [模板文字 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [優(yōu)化生產(chǎn) - 編寫可清除的 HTML - Tailwind CSS](https:// tailwindcss.com/docs/optimizing-for-Production#writing-purgeable-html)

以上是如何使用模板文字動態(tài)更改 React 中的 Tailwind CSS 類？的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！