Cómo aplicar CSS dinámicamente en Svelte

Tuve la necesidad de aplicar dinámicamente algunosCSSpropiedades a un elemento, usandoSvelte, cuando una de sus variables tenía un valor particular.

La solución más simple que encontré fue agregar una clase HTML cuando elselectedel valor de la variable eratrue, y luego escribí algo de CSS que apuntó a ese elemento con la clase:

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

<span class=“cell {selected === true ? ‘selected’ : ‘’}”> {value} </span>

Este tipo de necesidad es tan común que Svelte agregó la capacidad de vincular el nombre de la clase a un valor de variable:

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

y de una manera más concisa, usando la notación abreviada:

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

Descarga mi gratisManual Svelte


Tutoriales más esbeltos: