Svelte：来自变量的动态 Tailwind-Class

Question

如果另一个 var 为真，我如何应用顺风类...以下似乎不起作用。

这行得通

<script>
    let svgColor = 'text-red-400'
    
</script>
    
<p class="{svgColor}">Test</p>

但这不是

<script>
    let svgColor = 'text-red-400'
    let svgVisible = true;
</script>

<p class="{svgVisible ? {svgColor} : ''}">Test</p>

Answer 1

通过用花括号包裹 svgColor，您可以有效地使用道具 svgColor 创建一个对象。

正确的语法是：

<p class={svgVisible ? svgColor : ''}>Test</p>