html - 如何覆盖用于下拉的类库按钮(Angular 4+)？

Question

我将 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 中设置它时，它不起作用。我试着给它上课，但它不起作用。

Answer 1

因为angular样式封装。就像 @devpato 提到的那样，您必须使用 ::ng-deep 来存档您想要的 mat 按钮组件的样式。

但重要的是要了解，单独使用 ::ng-deep 会将该样式应用于应用中所有带有 .mat-menu-item 类的按钮。

因此，如果您希望样式仅影响特定组件，请在它之前使用 :host(:host 表示托管 mat button 组件的组件)

:host ::ng-deep button.mat-menu-item:hover {
   ....
}