Personaliza tus aplicaciones con ganchos de estilo ☁️

Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoamérica .

El enlace a la publicación original, lo encontrarás al final de este artículo.

…

Los ganchos de estilo pasaron a GA con el lanzamiento de Spring '22. Esta función abre la puerta a la personalización de los componentes básicos de Lightning y mucho más. Con los ganchos de estilo, puede cambiar fácilmente la apariencia de una interfaz de usuario estándar modificando algunas líneas de CSS:

No debatiremos sobre gustos y colores en esta publicación, pero cubriremos qué son las propiedades personalizadas de CSS y los ganchos de estilo y cómo puede aprovecharlos para aplicar estilo a los componentes base de Lightning y crear componentes temáticos y reutilizables. Usaremos una receta de gancho de estilo de la aplicación de muestra LWC Recipes como ejemplo. Por último, pero no menos importante, ¡tendrás la oportunidad de participar en nuestro LWC Style Challenge!

Acerca de las propiedades personalizadas de CSS y los ganchos de estilo

Antes de sumergirnos en los conceptos específicos de Salesforce, debemos dar un paso atrás y hablar sobre los estándares web.

Al construir una aplicación con componentes web, nos beneficiamos de la encapsulación gracias a Shadow DOM . Esto significa que el CSS de cada componente es autónomo y no hay fugas de estilo entre los componentes. Sin embargo, este poderoso comportamiento va en contra del uso tradicional de CSS donde el estilo cae en cascada (como su nombre lo indica) hacia abajo en la jerarquía de componentes. La herencia de estilo es la base que permite a los diseñadores crear sistemas de diseño enriquecidos, por lo que necesitamos una alternativa para trabajar con componentes web.

Aquí es donde las propiedades personalizadas de CSS (también denominadas variables de CSS) resultan útiles. A diferencia de las reglas de CSS, las propiedades personalizadas atraviesan el Shadow DOM y le permiten compartir el estilo entre los componentes web. Esto los convierte en una gran herramienta para personalizar componentes web de manera coherente.

Gracias a este comportamiento, ya no necesita confiar en una combinación de atributos HTML y JS para configurar dinámicamente el estilo de los componentes web secundarios.

Las propiedades personalizadas son bastante simples de usar. Los declara como un atributo estándar dentro de una regla CSS, pero con un prefijo de doble guión ( -- ). Por ejemplo, el siguiente código declara una propiedad de "color de texto principal" como roja en una regla con el selector : :host :

 :anfitrión { --main-text-color : azul;
}

Luego podemos hacer referencia al valor de nuestra propiedad personalizada gracias a la función var() (ver documentos ):

 pags { color: var(--main-text-color); /* azul */
}

Volviendo al ecosistema de Salesforce, los ganchos de estilo son un conjunto de propiedades personalizadas de CSS expuestas por los blueprints del componente Lightning Design System (LDS) . En otras palabras, utiliza ganchos de estilo para personalizar los componentes base de Lightning y los componentes personalizados que usan LDS.

Dar estilo a los componentes base de Lightning

La mayoría de los componentes básicos de Lightning ofrecen un conjunto de ganchos de estilo que le permiten sobrescribir parte de su estilo. No se pueden personalizar todos los atributos de estilo, pero la lista de ganchos disponibles aumenta con cada lanzamiento de Salesforce.

Por ejemplo, tomemos el componente de alternar casilla de verificación. Mirando la documentación para el modelo de este componente, podemos ver una descripción general de los ganchos de estilo que admite:

Todo lo que se necesita para personalizar esta opción es sobrescribir algunos de estos ganchos de estilo en el CSS de un componente principal:

 /* CSS de un LWC principal que aloja un componente base de entrada lightning */
: anfitrión {
 -- sds - c - casilla de verificación - alternar - color - borde - marcado : #009900;
 -- sds - c - checkbox - alternar - color - fondo - marcado : #009900;
 -- sds - c - casilla de verificación - alternar - color - fondo - marcado - foco : #00cc00;
}

Nota: el prefijo de enlace de estilo slds de la documentación del modelo se convierte en sds cuando se aplica al código LWC.

Gracias a estas pocas líneas de CSS, convertimos una palanca azul estándar en una palanca verde:

Los ganchos de estilo y las propiedades CSS personalizadas no se limitan a los componentes básicos, también puede aprovecharlos para crear y compartir componentes reutilizables y con temas.

Construcción de componentes temáticos y reutilizables

Al igual que los componentes base de Lightning, usted también puede producir componentes temáticos y reutilizables gracias a las propiedades personalizadas de CSS. La clave de esto es la capacidad de especificar un valor alternativo como segundo argumento al usar la función val para recuperar valores de propiedad personalizados.

Por ejemplo, este fragmento de código tomado del componente viewSource (ver fuente ) de LWC Recipes abre la puerta a la personalización del color del texto en la descripción de una receta.

 .descripción { /* Usar propiedad personalizada con un valor alternativo */ color: var(--fuente-texto-color, #706e6b);
}

De forma predeterminada, el texto de la descripción será gris, y si un componente principal de viewSource especifica una propiedad personalizada --source-text-color , el valor de la propiedad sobrescribirá el color de texto predeterminado (el valor alternativo).

Al crear su propio tema, siga el patrón que mostramos en la receta de ganchos de estilo :

Declare algunas propiedades personalizadas base en la raíz de su componente principal
Sobrescriba los ganchos de estilo del componente base y del componente secundario con sus propiedades personalizadas

Como regla general, y siempre que sea posible, use sus propiedades personalizadas básicas en sus reglas de CSS en lugar de valores de codificación fija.

Veamos cómo se ve esto en la práctica. Comenzaremos definiendo algunas variables para nuestro tema. En nuestro caso, tenemos un color primario y un secundario que tienen tonalidades alternas:

 : host { /* Propiedades CSS personalizadas para reutilizar el estilo en este componente y componentes secundarios */ --primary-color: #e3df00; --primary-color-alt-shade: #a7a400; --color-secundario: #020024; --secundaria-color-alt-shade: #343304; /* ... */ }

Después de esto, usamos nuestras propiedades personalizadas para sobrescribir los ganchos de estilo para el componente secundario, ya sea un componente base como una tarjeta Lightning o un componente personalizado como viewSource :

 :anfitrión { /* ... */ /* Ganchos de estilo de tarjeta Lightning */ --sds-c-card-color-background: gradiente lineal ( 115 grados, var(--color-secundario) 60%, var(--primary-color-alt-shade) 100% ); --sds-c-card-text-color: var(--primary-color); --sds-c-card-radius-border: 1.5rem 0; --sds-c-card-color-border: var(--primary-color); --sds-c-card-footer-color-border: var(--primary-color-alt-shade); /* ... */ /* Ver ganchos de estilo de componente fuente */ --fuente-texto-color: #ffffff; --source-link-color: var(--primary-color); --source-link-color-hover: var(--primary-color-alt-shade);
}

Palabras de cierre y desafío

Esto concluye nuestro recorrido por las propiedades personalizadas de CSS y los ganchos de estilo. Aprendió cómo funcionan y cómo cambian las reglas del juego para personalizar Lightning Web Components. Vio cómo puede aprovecharlos para personalizar los componentes básicos de Lightning, así como para crear sus propios componentes personalizados reutilizables y con temas. Asegúrese de echar un vistazo a la aplicación de muestra LWC Recipes para ver un ejemplo práctico.

Desafío de estilo LWC

Hagamos un desafío amistoso: publique una captura de pantalla de su personalización de estilo más genial de la aplicación LWC Style Challenge con el hashtag #LWCStyleChallenge en Twitter o LinkedIn antes del 31 de julio. Revisaremos las presentaciones y retuitearemos las mejores contribuciones. ¡Sea creativo e impresiónenos con sus habilidades CSS!

Recursos

Sobre el Autor

Philippe Ozil es un defensor principal de desarrolladores en Salesforce, donde se enfoca en la plataforma de Salesforce. Escribe contenido técnico y habla con frecuencia en conferencias. Es un desarrollador de pila completa y disfruta trabajar en proyectos DevOps, robótica y realidad virtual. Sígalo en Twitter @PhilippeOzil o consulte sus proyectos de GitHub @pozil .