Estilos CSS reactivos en Svelte

Introducción

A veces necesitamos una variable reactiva en los estilos de nuestro componente. En otras librerías como Vue esto lo solucionamos con el v-bind. A día de hoy no tenemos un v-bind o algo similar en Svelte. Pero eso no significa que no lo podamos hacer.

Caso práctico

Vamos a crear un componente para mostrar un título que recibe dos props backgroundColor y fontSize.

<script>
  export let backgroundColor = "#ffffff";
  export let fontSize = "1rem";

  $: styleValiables = `
    --background-color: ${backgroundColor};
    --font-size: ${fontSize};
  `;
</script>

<div style={styleValiables}>
  <h1>fluuo.dev</h1>
</div>

<style>
  div {
    background-color: var(--background-color);
  }

  h1 {
    font-size: var(--font-size);
  }
</style>

Definimos las variables CSS en una variable reactiva:

$: styleValiables = `
  --background-color: ${backgroundColor};
  --font-size: ${fontSize};
`;

Pasamos las variables definidas:

<div style={styleValiables}>

Ya podemos utilizarlas:

div {
  background-color: var(--background-color);
}