J'utilise la bibliothèque de matériaux angulaires pour une barre de navigation déroulante. Le problème est que je voudrais parcourir la liste. Je ne peux pas changer le style en HTML, mais je peux facilement le faire dans Chrome.

/* Class set by Angular Material itself */

button.mat-menu-item:hover {
    width: 100%;
    color: green;
}
<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>

Quand je l'ai défini en CSS, cela ne fonctionne pas. J'ai essayé de lui donner des cours, mais cela ne fonctionne pas.

1
Eye Sun 7 nov. 2019 à 03:20

3 réponses

Meilleure réponse
button {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
<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>
0
suiwenfeng 7 nov. 2019 à 06:13

En raison de l'encapsulation de style angulaire. Comme @devpato 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 de la classe .mat-menu-item dans votre application.

Donc, si vous voulez que le style ne s'applique qu'à un composant spécifique, utilisez :host avant (le :host signifie le composant qui héberge le composant du bouton mat)

:host ::ng-deep button.mat-menu-item:hover {
   ....
}
1
Ethan Vu 7 nov. 2019 à 08:37

Essaye ça:

En utilisant :: ng-deep. Il sera reproduit à un moment donné, mais cela fonctionne en ce moment.

::ng-deep button.mat-menu-item:hover {
    width: 100%;
    color: green;
}
0
devpato 7 nov. 2019 à 03:08