Manejo de Estilos CSS en Svelte∂

---

Estilos Scoped en Svelte

En Svelte, los estilos por defecto son scoped, lo que significa que se aplican solo al componente en el que están definidos. Esto evita que los estilos afecten a otros componentes, manteniendo un aislamiento completo de los estilos. Los estilos scoped son ideales para asegurarse de que un componente no interfiera con otros.

Ejemplo de Estilos Scoped:

<script>
let color = "blue";
</script>

<style>
p {
  color: {color};
}
</style>

<p>Este párrafo será azul.</p>

En este ejemplo, el estilo solo se aplica al párrafo dentro del componente Svelte actual.

Estilos Globales

A veces es necesario aplicar estilos globales que afecten a toda la aplicación, como en el caso de estilos de fuentes, márgenes generales, etc. Para aplicar estilos globales en Svelte, puedes usar la palabra clave :global dentro de las etiquetas <style>.

Ejemplo de Estilos Globales:

<style>
:global(body) {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
</style>

Aquí, el estilo se aplica a la etiqueta body de toda la página, no solo al componente actual.

Estilos Combinados

También puedes combinar estilos scoped y globales en un mismo componente. Esto es útil cuando quieres que algunos estilos sean locales al componente y otros sean globales.

Ejemplo de Estilos Combinados:

<script>
let backgroundColor = "lightblue";
</script>

<style>
p {
  color: red;
}

:global(body) {
  background-color: {backgroundColor};
}
</style>

<p>Este párrafo será rojo, y el fondo de la página será lightblue.</p>