CODEWITHSUNDEEP
cssangularangular-material
Marcos Bertuol
Marcos Bertuol

Reputation: 39

How to add class on nested mat-menu in Angular 7?

I was able to style mat-menu by adding the following to CSS file:

.toolbar-menu + * .cdk-overlay-pane > div.mat-menu-panel > div.mat-menu-content {
    background-color: rgb(30, 33, 41) !important;

    button.mat-menu-item {
        color: #989FA2;
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        height: 28px;
        line-height: 28px;
    }
}

In HTML:

<mat-menu #userMenu="matMenu" [overlapTrigger]="false" backdropClass="toolbar-menu">

However, this doesn't work for nested menu. My HTML looks like:

<button mat-menu-item [matMenuTriggerFor]="configurations">Configurações</button>
...
<mat-menu #configurations="matMenu" backdropClass="toolbar-menu">

This is how it looks like: Text

Any solutions?

Upvotes: 0

Views: 704

Answers (1)

JiBi
JiBi

Reputation: 388

Simply use class="toolbar-menu" instead of backdropClass and modify you css like this

    .toolbar-menu > div.mat-menu-content {
  background-color: rgb(30, 33, 41);

  button.mat-menu-item {
    color: #989fa2;
    font-size: 12px;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    height: 28px;
    line-height: 28px;
  }
}

Upvotes: 1

Related Questions