css - 如何使用 CSS 覆盖禁用的 mat-menu-item 的行为？

Question

我正在使用 Angular 材质菜单来创建用户菜单。作为第一个信息，我想显示用户的名字和姓氏。

在这里，我对禁用的行为感兴趣，mat-menu-item因为它具有不可点击的性质，但我无法通过 CSS 覆盖该行为。我希望它像 gitlab 用户菜单一样粗体，而不是浅灰色。

<div>
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>account_circle</mat-icon>
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
  <mat-menu #menu="matMenu" yPosition="below" >
    <p class="user-info" mat-menu-item disabled>Name Surname</p>
    <mat-divider></mat-divider>
    <button class="menu-item" mat-menu-item>Profile</button>
    <mat-divider></mat-divider>
    <button mat-menu-item>Sign out</button>
  </mat-menu>
</div>

标签： cssangularangular-material

Answer 1

在您的 CSS 中，您可以说：

.mat-menu-item[disabled] {
    color: default;
}