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>

Tutoriales más esbeltos:

• Empezando con Svelte - un breve tutorial
• Cómo trabajar con accesorios en Svelte
• Cómo importar componentes en Svelte
• Cómo exportar funciones y variables desde un componente Svelte
• Plantillas esbeltas: lógica condicional
• Cómo volver a renderizar un componente Svelte a pedido
• Ranuras esbeltas
• Cómo agregar comentarios en las plantillas de Svelte
• Ataduras esbeltas
• Manejo de actualizaciones de estado en Svelte
• Declaraciones reactivas en Svelte
• Eventos esbeltos del ciclo de vida
• Plantillas esbeltas: bucles
• Resolver promesas en plantillas Svelte
• Trabajar con eventos en Svelte
• Gestión de estado de componentes cruzados en Svelte
• Cómo acceder a un parámetro de URL en Sapper fuera del módulo de script
• Cómo aplicar CSS dinámicamente en Svelte
• Cómo redirigir a una URL en Sapper
• Cómo simular un bucle for en plantillas Svelte