如何安装svelte_如何在Svelte中动态应用CSS

如何安装svelte

I had the need to dynamically apply some CSS properties to an element, using Svelte, when one of its variables had a particular value.

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

The simplest solution I found was to add an HTML class when the selected variable value was true, and then I wrote some CSS that targeted that element with the class:

我找到的最简单的解决方案是，当selected变量的值为true时，添加一个HTML类，然后我编写了一些针对该元素CSS类：

<style>
  /* ...other CSS... */
  span.cell.selected {
    outline-color: lightblue;
    outline-style: dotted;
  }
</style>

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

This kind of need is so common that Svelte added the ability to bind the class name to a variable value:

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

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

and in a more concise way, using the shorthand notation:

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

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

翻译自: https://flaviocopes.com/svelte-dynamically-apply-css/

如何安装svelte