Mat-button style not applying in Mat-menu

Question

I have an Angular 11 project with a custom dropdown component which uses mat-menu for showing dropdown items.

I am passing a mat-button inside this dropdown component (along with the other menu items) that isn't working properly. When I add color="accent" mat-button's background-color doesn't change. Or rather, ._theming.scss is not adding the background-color property.

Kindly note that I have already imported MatButtonModule everywhere and it's working everywhere else in the project but in mat-menu s.

This is dropdown.component.html :

//this button is not the one I'm talking about, this is just the button which opens and closes 
the dropdown custom component and accepts an arrow, a title, and an icon

<button
    mat-button
    disableRipple
    [ngClass]="{ 'is-open': isOpen, 'no-arrow': !hasArrow }"
    [matMenuTriggerFor]="theMenu"
    (menuOpened)="onMenuOpen($event)"
    (menuClosed)="onMenuClose($event)"
    #theMenuTrigger
  >
    <ng-container *ngIf="hasIcon">
      <mat-icon svgIcon="{{ icon }}">{{ icon }}</mat-icon>
    </ng-container>
    <div *ngIf="!!title">{{ title }}</div>
    <ng-container *ngIf="hasArrow"
      ><mat-icon
        [ngClass]="{ 'is-open': isOpen }"
        svgIcon="arrow-down"
        class="icon-arrow__down"
      ></mat-icon
    ></ng-container>
  </button>
  <mat-menu #theMenu="matMenu" class="dropdown-menu">
    <ng-content></ng-content>
  </mat-menu>

And this is my navbar.component.html where I'm using the dropdown component:

          <dropdown-menu title="حساب کاربری" icon="profile" [hasArrow]="true">
            <div class="container__welcome--user">
              <span
                mat-menu-item
                disabled
                class="navbar__personal-info-item text__welcome--user"
              >
                <mat-icon
                  svgIcon="profile"
                  aria-hidden="false"
                  aria-label="profile SVG icon"
                ></mat-icon>
                سلام، {{ personalInfo }}</span
              >
              <span
                mat-menu-item
                disabled
                class="navbar__personal-info-item email"
                *ngIf="!!traderEmail"
                >{{ traderEmail }}</span
              >
            </div>

            <a
              mat-menu-item
              routerLink="/user/settings"
              [queryParams]="{ tab: 'security' }"
            >
              <mat-icon
                class="icon__user--account"
                svgIcon="security-settings"
                aria-hidden="false"
                aria-label="settings SVG icon"
              ></mat-icon>
              <span>تنظیمات امنیتی</span>
            </a>
            <a
              mat-menu-item
              routerLink="/user/settings"
              [queryParams]="{ tab: 'kyc' }"
            >
              <mat-icon
                class="icon__user--account"
                svgIcon="kyc-settings"
                aria-hidden="false"
                aria-label="kyc SVG icon"
              ></mat-icon>
              <span>احراز هویت</span>
            </a>

            //THIS BUTTON IS THE ONE I'M TALKING ABOUT

            <button
              mat-flat-button
              color="accent"
              class="sign-out-button"
              (click)="requestSignOut()"
            >
              <span> خروج </span>
            </button>
          </dropdown-menu>

Answer 1

To set color of button I suggest to use style . If you set style="color: red;important;" inside the button. It will color the text

<button mat-flat-button style="color: red !important
(click)="select('Basic.Item1')">Basic.Item1
</button>

OUTPUT will be like below

If you set style="background-color: red;important." . It will color the background of the text

<button mat-flat-button style="background-color: red !important
(click)="select('Basic.Item1')">Basic.Item1
</button>

OUTPUT will be like below

You can also use [ngStyle]="mystyle" like
HTML

<button mat-flat-button [ngStyle]="mystyle"
    (click)="select('Basic.Item1')">Basic.Item1
    </button>

TS

 mystyle:any= { backgroundColor: 'red'};

Note: !important will override the CSS of the button for specific attribute.