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>

输出如下

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

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

输出如下

你也可以像
一样使用[ngStyle]="mystyle" HTML

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

TS

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

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

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

1 个答案: