Mat-button style not applying in Mat-menu - html

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