Personalización de estilos de componente en Ignite UI for Web Components

Los componentes Ignite UI for Web Components permiten a los usuarios modificar varias partes de su hoja de estilo exponiendo variables CSS y partes CSS.

CSS Parts

Además de los métodos para personalizar las distintas partes del tema del componente, como colores, sombras, tipografía, redondez, tamaño y espaciado mencionados en las secciones anteriores de esta documentación, puedes ensuciarte las manos sobrescribiendo secciones específicas de la hoja de estilo de cada componente centrándose en partes específicas del mismo. Todos los componentes exponen varias partes CSS que le permiten agregar o anular estilos existentes definidos internamente para el componente.

Las partes que expone un componente se pueden encontrar en la documentación API de cada componente. Si eres del tipo explorador y quieres tener un enfoque más práctico en la codificación, siempre puedes descubrirlo utilizando la interfaz de 'inspector' de tu navegador de elección. Por ejemplo, si desea encontrar qué partes expone el avatar, simplemente haga clic derecho en el componente en su navegador y haga clic en "Inspeccionar" (en Chrome). Esto abrirá el inspector web y revelará el marcado del elemento personalizado en la pestaña del explorador de elementos. Deberías ver algo similar a la captura de pantalla a continuación.

Notarás que IgcAvatarComponent expone 4 partes: base, icon, image e initials, según el tipo de avatar. Esas partes le permiten sobrescribir estilos definidos dentro de su alcance.

Entonces, si desea cambiar el color de las iniciales al color primario en su paleta, puede sobrescribir la propiedad de color en la base o en initials de esta manera:

igc-avatar::part(base) {
  color: var(--ig-primary-500);
}
css

Puede utilizar el mismo enfoque para modificar o agregar cualquier propiedad en la parte base o cualquier otra parte en cualquier otro componente.

CSS Variables

Un enfoque alternativo sería modificar las variables CSS responsables de varias partes del estilo del componente. Convenientemente, el avatar diseña sus iniciales usando una variable de la paleta existente. Tras una inspección más cercana, podemos ver que la variable de color es--ig-gray-800. Modificar el valor de esta variable en el alcance del avatar también nos permitiría cambiar el color de las iniciales.

igc-avatar {
  --ig-gray-800: hsl(0, 0%, 62%);
}
css

Al volver a escribir el valor de la--ig-gray-800 variable, se hace lo mismo que en el ejemplo anterior sin sobrescribir explícitamente la propiedad color. Este enfoque funciona, pero podría resultar un poco confuso realizar un seguimiento de la procedencia del color si inspecciona la propiedad de color de forma aislada. Por lo tanto, se recomienda sobrescribir la propiedad color en la parte base.

Conclusion

Habiendo aprendido sobre las partes CSS y las variables CSS y en combinación con los otros métodos enumerados en la documentación, debería poder adaptar el aspecto de todos los componentes a su gusto.

API References

• ConfigureTheme