J'ai déjà essayé:
:host ::ng-deep .mat-list-item-content{
flex-direction: column
}
(j'ai obtenu la solution de ce Remplacer le style de matériau angulaire dans le composant angulaire )
.myClass {flex-direction: column} , puis j'ai ajouté ma classe à mat-list-item-content
mais le champ est toujours remplacé
3 Réponses :
En effet, la propriété CSS d'origine est plus spécifique .. si vous ajoutez! important derrière votre CSS:
:host ::ng-deep .mat-list-item-content {
flex-direction: column !important;
}
Cela devrait résoudre votre problème.
N'utilisez pas ng-deep et! important.
ng-deep est obsolète.
! important n'est pas vraiment une bonne pratique.
Écrivez des styles plus spécifiques dans votre fichier de style global. Ajoutez une sorte de conteneur / classe sur l'élément supérieur et ajoutez par exemple:
.example-container .mat-list-base .mat-list-item .mat-list-item-content {
background: red;
}
Bien que je convienne que l'utilisation de! Important n'est pas nécessairement une bonne pratique, rendre vos sélecteurs CSS plus spécifiques n'est pas non plus nécessairement une bonne pratique. C'est un inconvénient courant de styliser les composants d'autres personnes. J'ai lu que ng-deep est obsolète, mais je n'ai trouvé aucune bonne solution pour ne pas l'utiliser ... avez-vous des suggestions?
En fait, j'ai commencé à lire sur, un bon post de stackoverflow sur ng-deep: stackoverflow.com/questions/47024236/...
Je suis d'accord aussi, ng-deep est obsolète. J'ai trouvé une solution pour cela en utilisant ViewEncapsulation.None. voici un lien si vous souhaitez en savoir plus à ce sujet: angular.io/guide/component- styles # view-encapsulation
Eh bien, je suis d'accord, mais si nous voulons écraser les styles d'autres personnes, je suppose qu'il vaut mieux les rendre plus spécifiques et conserver tous les changements au même endroit (si nous voulons éviter! Enfer important). À propos de l'encapsulation.Aucune C'est presque la même chose que de l'ajouter au fichier de style global. La seule différence est l'endroit où vous tiendrez ces styles.
Eh bien, ng-deep est obsolète depuis longtemps, mais vous devez tout de même garder à l'esprit qu'ils pourraient le supprimer de la version x d'angular et si vous souhaitez mettre à jour votre projet plus tard, vous devrez le changer. Si vous avez la possibilité d'éviter de l'utiliser, évitez-le.
Pour ajouter en plus de la réponse de @ adrian-sawicki, il est également préférable de désactiver Afficher l'encapsulation ci-dessous:
.example-container .mat-list-base .mat-list-item .mat-list-item-content {
padding: 0 !important;
}
Une fois que vous avez fait cela, vous n'avez pas besoin de vous fier à :: ng-deep ou : host :: ng-deep etc car ils sont obsolètes.
Par exemple, si vous voulez remplacer le remplissage pour mat-list-item, tout ce que vous avez à faire est de
@Component({
selector: 'list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
encapsulation: ViewEncapsulation.None
})