CODEWITHSUNDEEP
cssangularangular-material
KrisKris1
KrisKris1

Reputation: 349

How to override the behavior of a disabled mat-menu-item with CSS?

I am using an Angular material menu to create the user menu. As the first information I want to display the user's first name and last name.

Here I am interested in the behavior of a disabled mat-menu-item because of the non-clickable nature of it but I cannot override the behavior via CSS. I want it to be bold as in the gitlab user menu and not the light gray as it is. 

<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>

Upvotes: 3

Views: 2729

Answers (1)

D&#225;niel Barta
D&#225;niel Barta

Reputation: 1072

In your css you can say:

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

Upvotes: 2

Related Questions