在 Tailwind CSS 中應用帶有模板文字的動態(tài) CSS 類

嘗試動態(tài)更改 Tailwind CSS 中的 CSS 類時可能會遇到困難。例如，如果您嘗試使用以下代碼：

const [click, setClick] = useState(false);

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

const openNav = () => {
  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 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;

此代碼將無法有效執(zhí)行。要解決此問題，請進行以下更改：

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

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

至關(guān)重要的是，在構(gòu)建類名稱時避免使用字符串連接，如下所示：

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

相反，選擇選擇完整的類名稱：

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

// Following is also valid if you don't need to concatenate the class names
<div className={error ? 'text-red-600' : 'text-green-600'}></div>

Tailwind 將避免從生產(chǎn)版本中刪除完整的類名稱（如果它們包含在

此外，您還可以訪問各種選項，包括類名或 clsx 等庫，以及 twin.macro、twind 和 xwind 等 Tailwind 特定解決方案。

進一步正在閱讀

• 【React.js 條件應用類名稱](https://github.com/facebook/react/issues/2316)
• [如何動態(tài)添加類到手動類名？](https://stackoverflow.com/questions/37585255 /how-to-dynamically-add-a-class-to-manual-class-names)
• [處理條件樣式的正確方法React](https://dev.to/furkancakmak/conditional-css-class-names-in-react-the-right-way-iwk)
• [在 JSX 中嵌入表達式](https:// Reactjs.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)

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