无法在className中使用其他css格式的变量

Question

我正在尝试学习 React 和 Tailwind。在其中一个教程中，他们有代码

<div className={'bg-black h-screen p-5 pt-8 ${open ? "w-72" : "w-20"}'}>

我的问题是，当我复制此代码时，它无法按照在线显示的方式运行。 ${open} 部分未显示。

另一方面，我已经得到了

<div className={open ? "w-72" : "w-20"} />

去工作。我可以将 CSS 顶部的变量合并到一行中吗？

谢谢你

Answer 1

您可以简单地使用 jsx 语法。

<div className={`bg-black h-screen p-5 pt-8 ${open ? "w-72" : "w-20"}`}>