From 39f7d06ad312031db2f62eda6618d4bedf567467 Mon Sep 17 00:00:00 2001 From: waxer59 <78129249+Waxer59@users.noreply.github.com> Date: Tue, 29 Aug 2023 21:11:47 +0200 Subject: [PATCH] update styling --- src/content/docs/es/guides/styling.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/docs/es/guides/styling.mdx b/src/content/docs/es/guides/styling.mdx index 960c20c11e439..5d714a8876835 100644 --- a/src/content/docs/es/guides/styling.mdx +++ b/src/content/docs/es/guides/styling.mdx @@ -130,7 +130,6 @@ const backgroundColor = "rgb(24 121 78)"; En Astro, los atributos HTML tales como `class` no se pasan automáticamente a los componentes hijos. - En cambio, debes aceptar una prop `class` en el componente hijo y aplicársela al elemento raíz. Al desestructurar las props debes renombrarlo, porque `class` es una [palabra clave (o reservada)](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Lexical_grammar#palabras_clave) en JavaScript. ```astro title="src/components/MyComponent.astro" {2,4} @@ -154,7 +153,7 @@ import MyComponent from "../components/MyComponent.astro" ¡Esto será rojo! ``` -Este patrón te permite estilar componentes hijos directamente. Astro pasará el nombre de la clase local del padre (por ejemplo `astro-hhnqfkh6`) por la propiedad `class` automaticamente, incluyendo el hijo en ámbito del componente padre. +Este patrón te permite estilar componentes hijos directamente. Astro pasará el nombre de la clase local del padre (p. ej. `astro-hhnqfkh6`) por la propiedad `class` automaticamente, incluyendo el hijo en el ámbito de su padre. Ten en cuenta que este patrón solo funciona cuando tu [opción `scopedStyleStrategy`](/es/reference/configuration-reference/#scopedstylestrategy) está configurada como `'where'` o `'class'`. :::note[Clases globales de componentes padre] Debido a que la propiedad `class` incluye al hijo en el ámbito de su padre, es posible que los estilos caigan en cascada de padre a hijo. Para evitar que esto tenga efectos secundarios no deseados, asegúrese de usar nombres de clase únicos en el componente secundario.