📝El sistema de maquetado de Astro es muy parecido a Vue o Svelte, y con el tema de los estilos también.
Por ejemplo, los estilos que viven dentro de un componente son por defecto locales, es decir, no afectan a otros componentes de tu sitio. Si bien siempre es recomendable usar estilos locales para la mayoría de los casos, eventualmente puedes encontrar una razón válida para escribir CSS global. Puedes desactivar el CSS con alcance local predeterminado con el atributo <style is:global>.
<style is:global>
/* Global, entregada tal como está al navegador.
Se aplica a todas las etiquetas <h1> de tu sitio web. */
h1 { color: red; }
</style>
También puedes mezclar reglas de CSS globales y locales en la misma etiqueta <style>
usando el selector :global()
. Esto se convierte en un patrón poderoso para aplicar estilos CSS a los elementos hijos de tu componente.
<style>
/* Con alcance solo a este componente */
h1 { color: red; }
/* Mixta: se aplica solo a los elementos `h1` hijos. */
article :global(h1) {
color: blue;
}
</style>
<h1>Title</h1>
<article><slot /></article>
👀RECUERDA ⚠️:
Los estilos locales deben usarse con la mayor frecuencia posible. Los estilos globales deben usarse solo cuando sea necesario.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?