Tengo un componente desplegable en angular 12. Muestra el comportamiento de selección. Se implementa como
<ngx-select-dropdown [config]="config" [options]="dropdownOptions" [(ngModel)]="dataModel" [multiple]="false" ></ngx-select-dropdown>usando https://github.com/manishjanky/ngx-select-dropdown
Después de renderizar, genera un marcado como
Ahora, quiero modificar la clase del botón (resaltado en color amarillo) representado en el marcado, pero no tengo acceso directo al marcado del botón. ¿Cómo podemos hacer eso?
Puede ver este hilo para algunas soluciones anteriores: ¿Cómo diseñar componentes secundarios del archivo CSS del componente principal? tenga en cuenta ::ng-deep está en desuso.
Prefiero lo siguiente y probablemente lo agregaré a ese hilo.
La única forma de hacer que su css llegue a un niño es hacer que el archivo css sea global. Puede usar ViewEncapsulation.None para hacer que el css de todo el componente sea global, pero eso es bastante complicado. Prefiero simplemente poner esta clase global dentro de los styles.css globales.css, o puede crear un nuevo archivo y agregarlo a la matriz de styles en angular.json .
Entonces la pregunta es ¿qué usamos como selector? No podemos simplemente seleccionar el button , ya que anulará todos los botones del proyecto, y no queremos usar .ngx-dropdown-button solo porque es posible que queramos diferentes estilos para diferentes menús desplegables. Primero queremos agregar una clase específica dentro del componente. Asegúrese de que sea único, probablemente sea mejor usar el nombre del componente.
<ngx-select-dropdown class="my-component-name-dropdown" [config]="config" [options]="dropdownOptions" [(ngModel)]="dataModel" [multiple]="false" ></ngx-select-dropdown> Ahora podemos seleccionar este menú desplegable específico de nuestro archivo de estilos globales. Sin embargo, debemos asegurarnos de lograr una especificidad lo suficientemente alta como para anular los estilos predeterminados. La forma rápida y sucia es simplemente usar !important junto a cada propiedad, pero luego no deja forma de anular su css. Una mejor manera es repetir el nombre de una clase hasta que logremos la especificidad deseada. Descubrí que necesitaba repetir una clase tres veces aquí.
En el archivo de estilos globales
.my-component-name-dropdown .ngx-dropdown-button.ngx-dropdown-button.ngx-dropdown-button { color: red; }O la manera rápida y sucia
.my-component-name-dropdown .ngx-dropdown-button { color: red !important; } Por supuesto, si desea anular todos los botones desplegables ngx, la clase única no es necesaria y solo puede usar la .ngx-dropdown-button .
Nota: muchos componentes de la interfaz de usuario tienen una opción de class en el objeto de configuración/opciones que le permite anular el css predeterminado, es posible que desee solicitar que los desarrolladores agreguen esto.