我将Angular Material库用于下拉导航栏。 问题是我想在列表中徘徊。我无法更改HTML中的样式，但可以轻松地在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>
当我在CSS中进行设置时，它不起作用。我试图给它上课，但没有用。
由于角度样式的封装。就像提到的@devpato一样，您必须使用::ng-deep来为mat按钮组件归档所需的样式。
但重要的是要了解，单独使用::ng-deep会将样式应用于应用程序中具有.mat-menu-item类的所有按钮。
因此，如果您希望样式仅对特定组件起作用，请在其前使用:host（:host表示承载按钮组件的组件）
:host ::ng-deep button.mat-menu-item:hover {
....
}
尝试一下：
使用:: ng-deep。它将在某个时候重新安装，但现在可以使用。
::ng-deep button.mat-menu-item:hover {
width: 100%;
color: green;
}
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>