Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

243
Views
Adjuntar y alternar una clase de elemento CSS en angular usando su selector HTML

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

código generado por el menú desplegable

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?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!