墊子按鈕樣式不適用於墊子菜單

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。