代码之家 › 专栏 › 技术社区 › Berendschot

将条件类与静态类NextJS相结合

tailwind-css jsx next.js html javascript

0

Berendschot · 技术社区 · 2 年前

# This will work
<span className="font-medium">{message}</span>

# This will work too
<span className={status ? "bg-green-600":"bg-orange-600"}>{message}</span>

在Visual Studio中,以下代码段将给出一个错误 ',' expected.ts(1005)

# This (where I'm trying to apply *both* classes to the same element) won't work
<span className={"font-medium" + {status ? "bg-green-600":"bg-orange-600"}}>{message}</span>

忽略该选项将产生以下错误:

Error: 
  x An object member cannot be declared optional

1 回复 | 直到 2 年前

1

2

JeanJacquesGourdin 2 年前

您需要在font medium后面加一个空格,否则它将被解释为单个类

<span className={"font-medium " + status ? "bg-green-600":"bg-orange-600"}>{message}</span>

对于模板文字:

<span className={'font-medium ${status ? "bg-green-600" : "bg-orange-600" }'}>{message}</span>

(请注意此处为“and not”)