J'utilise la bibliothèque de matériaux angulaires pour une barre de navigation déroulante. Le problème est que je voudrais survoler la liste. Je ne peux pas changer le style en HTML, mais je peux facilement le faire dans Chrome.
<mat-menu #menu="matMenu"> <a href="https://google.com"><button mat-menu-item>Help</button></a> <button mat-menu-item (click)="Logout()">Sign Out</button> </mat-menu>
/* Class set by Angular Material itself */
button.mat-menu-item:hover {
width: 100%;
color: green;
}
Lorsque je configure cela dans CSS, cela ne fonctionne pas. J'ai essayé de lui donner des cours, mais ça ne marche pas.
3 Réponses :
Essayez ceci:
en utilisant :: ng-deep. Il sera replatifié à un moment donné, mais cela fonctionne maintenant.
::ng-deep button.mat-menu-item:hover {
width: 100%;
color: green;
}
J'utilise Angular 8
C'est très bien. Toujours pas répliqué même sur Angular 9rc. Cela devrait fonctionner :)
En raison de l'encapsulation de style angulaire. Comme @devpato l'a mentionné, vous devez utiliser :: ng-deep pour archiver le style que vous souhaitez pour le composant bouton mat.
Mais il est important de comprendre que l'utilisation de :: ng-deep seul appliquera ce style à tous les boutons avec la classe .mat-menu-item dans votre application.
Donc, si vous voulez que le style s'applique uniquement à un composant spécifique, utilisez : host avant lui (le : host signifie le composant qui héberge composant du bouton mat)
:host ::ng-deep button.mat-menu-item:hover {
....
}
J'utilise Angular 8, savez-vous si cela fonctionne avec Angular 8 ou ce Angular JS?
<mat-menu #menu="matMenu">
<a href="https://google.com"><button mat-menu-item>Help</button></a>
<button mat-menu-item (click)="Logout()">Sign Out</button>
</mat-menu>
button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
Cela a fonctionné. Le problème était que je devais le mettre en dehors de mon CSS imbriqué.
ajoutez votre propre classe et votre propre style css, et ajoutez! important à la fin avant le point-virgule?
J'ai essayé ça, ça n'a pas marché
@EvikGhazarian n'utilise pas important! sa mauvaise pratique