Warum funktioniert der verkettete String-Klassenname in Tailwind nicht?

Question

Jedes Mal verwende ich das style-Attribut außerhalb von className, da keines der folgenden Beispiele Stile auf meine React-Elemente anwendet. Können Sie erklären, warum das passiert und wie ich es beheben kann?

Ich habe die Dokumentation gelesen (https://tailwindcss.com/docs/content-configuration#dynamic-class-names), aber mein Anwendungsfall ist: Der Benutzer wählt eine Farbe aus dem Farbwähler aus und dann wähle ich die Farbe basierend aus auf dem ausgewählten Farbwechselhintergrund. Ich kann den Wert von „bg-[colorValue]“ nicht an jede einzelne Farbe übergeben, daher muss ich den Wert anschließend mit „bg-[“ verketten. Weil ich nicht alle Farben dem vollständigen Klassennamen zuordnen kann.

const red500 = "red-500";
const red600Hex = "#dc2626";
const bgColor = "bg-[" + red600Hex + "]";
const bgColor2 = "bg-[" + "#dc2626" + "]";

function App() {
    return (
        <>
            <h1 className={` bg-${red500} `}>Hello</h1>
            <h1 className={` bg-[${red600Hex}] `}>Hello</h1>
            <h1 className={` bg-${`[${red600Hex}]`} `}>Hello</h1>
            <h1 className={` ${bgColor} `}>Hello</h1>
            <h1 className={` ${bgColor2} `}>Hello</h1>
        </>
    );
}

Answer 1

当模板字面量字符串正常工作时，您无需担心字符串拼接问题。

const red500 = 'red-500';
const red600Hex = '#dc2626';
const bgColor = `bg-[${red600Hex}]`;
const bgColor2 = `bg-[${'#dc2626'}]`;

export function App() {
  return (
    <>
      <h1 className={` bg-${red500} `}>Hello</h1>
      <h1 className={` bg-[${red600Hex}] `}>Hello</h1>
      <h1 className={` bg-${`[${red600Hex}]`} `}>Hello</h1>
      <h1 className={` ${bgColor} `}>Hello</h1>
      <h1 className={` ${bgColor2} `}>Hello</h1>
    </>
  );
}

Tailwind Playground

上面的链接还给了我一个关于拼接的警告："Bug Finder: Unexpected string concatenation of literals.eslint"

我甚至添加了一个选项来动态控制最后一个 h1 的颜色，通过状态来实现：

const colors = [
  {value: "#dc2626"},
  {value: "#dc06e6"},
  {value: "#dce606"},
]


export function App() {
  const [color, setColor] = React.useState(colors[0].value)
  return (
    <>
      <h1 className={`text-green-500 bg-${red500} `}>Hello</h1>
      <h1 className={`bg-[${red600Hex}] `}>Hello</h1>
      <h1 className={`text-green-200 bg-${`[${red600Hex}]`} `}>Hello</h1>
      <h1 className={`${bgColor} `}>Hello</h1>
      <h1 className={`bg-[${color}]`}>Hello</h1>
      <select onChange={(e) => setColor(e.currentTarget.value)}>
        {colors.map(c => <option className={`bg-[${c.value}]`} value={c.value}>{c.value}</option>)}
      </select>
    </>
  );
}