如何将自定义样式应用于 mat-menu 内容？

Question

我使用垫子菜单过滤自定义 table 组件中的列。在垫子菜单中，我有一个我想要设置样式的搜索输入。我试过：

class
panelClass
backdropClass

但没有成功。我想指出，如果我将样式放在主 style.scss 文件中，css 将应用于输入字段。但我想用另一种方式解决它，将 css 放在组件文件中。这是我的代码：

<mat-menu #menu>
    <div fxLayout="row wrap" fxFlex="100">
      <div stop-propagation fxFlex="90" fxFlexOffset="5">
        <div class="input-container">
          <input id="inputSearch" class="search-input" type="text" autocomplete="off"
            placeholder="{{ 'Ricerca...' | translate }}" [(ngModel)]="searchValue" (keyup)="filterValue(col.key)">
        </div>
        <mat-selection-list class="selectList" #select [id]="col.key"
          (selectionChange)="selecteChange($event, col.key)" class="maxHeight300">
          <ng-container *ngIf="conditionsList && conditionsList.length > 0; else noOptions">
            <mat-list-option color="primary" [checkboxPosition]="'before'" *ngFor="let condition of conditionsList"
              [value]="condition">
              {{ condition }}
            </mat-list-option>
          </ng-container>
          <ng-template #noOptions>
            <span fxLayoutAlign="center center" [innerHTML]="'Nessun risultato' | translate"></span>
          </ng-template>
        </mat-selection-list>
      </div>
      <div fxFlex="90" fxFlexOffset="5" fxLayout="row" fxLayoutAlign="space-between center"
        *ngIf="conditionsList && conditionsList.length > 0" class="marginBottom10">
        <button fxFlex="49" mat-raised-button (click)="clearColumn(col.key)">Pulisci</button>
        <button fxFlex="49" mat-raised-button color="primary" (click)="applyFilter(col.key)">Filtra</button>
      </div>
    </div>
  </mat-menu>

和css

.search-input {
    width: 100%;
    -webkit-transition: -webkit-box-shadow 0.3s;
    transition: -webkit-box-shadow 0.3s;
    transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    font-size: 16px;
    line-height: 22px;
    padding: 10px;
    background-color: white;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    border: 1px solid grey;
    box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 10%), 0px 2px 5px 0px rgb(0 0 0 / 8%);      
}

Answer 1

根据问题的评论：

由于 MatMenu（以及通常在下面使用的 CdkOverlay）的实例化方式，样式必须在全局范围内才能影响覆盖层中呈现的内容。它们可以放在不同的文件中，但它们必须以某种方式穿透组件级别。

这意味着可以使用以下之一设置样式：

使用::ng-deep（已弃用，但仍然有效）选择器刺穿组件
使用ViewEncapsulation.None将组件样式表提升到全局级别
在全局中放置样式 styles.scss

stacblitz here 中提供了使用 ::ng-deep 和问题样式的示例。

如何将自定义样式应用于 mat-menu 内容？

How can I apply custom styles to the mat-menu content?

html-table

angular-material

angular