垫子按钮样式不适用于垫子菜单

Question

我有一个带有自定义下拉组件的 Angular 11 项目，该组件使用 mat-menu 来显示下拉项目。

我在这个下拉组件（连同其他菜单项）中传递了一个无法正常工作的垫子按钮。 当我添加color="accent" mat-button 的background-color不会改变。 或者更确切地说， ._theming.scss 没有添加background-color属性。

请注意，我已经在任何地方导入MatButtonModule并且它在项目中的其他任何地方都可以使用，但在mat-menu中。

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

这是我使用下拉组件的navbar.component.html ：

          <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

要设置按钮的颜色，我建议使用style 。 如果你设置style="color: red;important;" 按钮内。 它将为文本着色

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

OUTPUT 将如下所示

如果你设置 style="background-color: red;important." . 它将为文本的背景着色

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

OUTPUT 将如下所示

您也可以使用[ngStyle]="mystyle"类的
HTML

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

TS

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

注意： !important将覆盖特定属性按钮的 CSS。