如何在Svelte中动态应用CSS

我需要动态地应用一些CSS元素的属性，使用Svelte，当其变量之一具有特定值时。

我发现的最简单的解决方案是在selected变量值为true，然后编写了一些针对该元素的CSS类：

<style>
  /* ...other CSS... */
  span.cell.selected {
    outline-color: lightblue;
    outline-style: dotted;
  }
</style>
<span class=“cell {selected === true ? ‘selected’ : ‘’}”>
{value}
</span>

这种需求非常普遍，以至于Svelte添加了将类名绑定到变量值的功能：

<span class="cell" class:selected="{selected}">
  {value}
</span>

并以一种简明的方式使用速记符号：

<span class="cell" class:selected>
  {value}
</span>

免费下载我的苗条手册

如何在Svelte中动态应用CSS

更多精妙的教程：