4
votes

ng-multiselect-dropdown css personnalisé

J'utilise le ng-multiselect-dropdown . Comment puis-je remplacer le CSS?

    .multiselect-dropdown[_ngcontent-c5] .dropdown-btn[_ngcontent-c5] {
        display: inline-block;
        border: 1px solid #adadad;
        width: 100%;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.1;
        text-align: left;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border-radius: 4px;
   }

<ng-multiselect-dropdown [placeholder]="'Select Region'" 
    [data]="dropdownList" [(ngModel)]="selectedItems" 
    [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" 
    (onSelectAll)="onSelectAll($event)" > 
</ng-multiselect-dropdown>

J'ai besoin de remplacer le CSS par défaut avec le code CSS ci-dessus

angular html css

5 commentaires

vous pouvez ajouter ci-dessus css dans votre style global, c'est-à-dire le fichier style.css en supprimant les classes ajoutées angulaires par défaut

pour remplacer la règle de style globale sur le fichier de style de composant, ajoutez ceci sur votre composant encapsulation: ViewEncapsulation.None,

même en ajoutant dans la feuille de style globale cela ne fonctionne pas @TheParam

J'ai ajouté l'encapsulation: ViewEncapsulation.None mais il se charge toujours avec son css par défaut @JoelJoseph

ajoutez également ! important à vos styles de composants

3 Réponses :

5
votes

Angular par défaut ajoute du _ngcontent-xx au fichier CSS de votre composant afin qu'il ne soit pas en conflit avec d'autres composants.

Pour résoudre votre problème, vous devez ajouter le CSS ci-dessous dans votre fichier global style.css ou un autre moyen de rendre votre composant comme encapsulation: ViewEncapsulation.None signifiant son CSS n'ajoutera pas les classes par défaut de Angular.

Solution 1 : ajoutez une feuille de style globale.

style.css p>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None // Add this line
})
export class AppComponent  {

}

Solution 2 Rendre le composant ViewEncapsulation.None

component.ts strong >

.multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
}

Voici une solution sur stackblitz

J'espère que cela vous aidera!

2 commentaires

a ajouté le CSS dans la feuille de style globale mais cela ne fonctionne pas

en html, je n'ai que

2
votes

Vous pouvez essayer de cette manière:

:host ::ng-deep .multiselect-dropdown .dropdown-btn {
display: inline-block;
border: 1px solid #adadad;
width: 100%;
padding: 6px 12px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.1;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-image: none;
border-radius: 4px;

}

vous pouvez remplacer le css de n'importe quel module de nœud ou bibliothèque par: host et :: ng-deep. p>

1 commentaires

Meilleure réponse car elle ne nécessite pas de modifier la feuille de style globale pour le composant.

1
votes

Entourez votre scss avec le bloc : host :: ng-deep comme ceci:

:host ::ng-deep {
  .multiselect-dropdown {
    background: white
  }
}

0 commentaires