J'utilise Angular2 avec Alfresco Application Development Framework (ADF 1.7.0) et je souhaite réduire la hauteur des lignes du composant de liste de documents. Je ne suis pas entièrement sûr de savoir comment remplacer les propriétés CSS de ce composant.Substitution de css du composant ADF Angular2
Ce que j'ai déjà essayé est de mettre l'ecapsulation de AppComponent à encapsulation: ViewEncapsulation.Emulated. Ensuite, j'ai ajouté le CSS suivant à app.component.css
:host /deep/ .adf-data-table[_ngcontent-c9] tbody[_ngcontent-c9] tr[_ngcontent-c9] {
height: 36px;
}
:host /deep/ .adf-data-table[_ngcontent-c9] td[_ngcontent-c9] {
padding-top: 6px;
padding-bottom: 6px;
height: 36px;
}
J'ai trouvé le sélecteur .adf-data-table[_ngcontent-c9] tbody[_ngcontent-c9] tr[_ngcontent-c9] dans la console du navigateur. Le problème est que [_ngcontent-c9] peut changer et mes modifications ne s'appliquent plus.
J'ai également essayé ce sélecteur: .adf-data-table tbody tr mais mes modifications ne remplacent pas les propriétés par défaut. Que puis-je faire pour remplacer les propriétés par défaut du composant liste de documents sans utiliser explicitement [_ngcontent-c9] dans le sélecteur?
Merci pour tout conseil.
Vous devriez probablement utiliser ':: ng-deep' comme décrit dans [ce blog] (https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700) parce que'/deep/'est déprécié. Vous ne devriez pas avoir besoin du '[_ngcontent-c9]' si votre css est [spécifique] (https://developer.mozilla.org/en/docs/Web/CSS/Specificity) assez. (Si ce n'est pas le cas, essayez d'utiliser un ID ou une classe unique). Il sera difficile de créer une solution sans [mcve], si vous pouviez créer un [exemple plunker] (https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5) qui aiderait vraiment – 0mpurdy
La solution était d'utiliser un plus sélecteur spécifique, merci @ 0mpurdy! – CMatheis