html - 如何设置 Angular Material select 下拉叠加层的样式

Question

我有一个名为 currency-selector 的 Angular 组件，它有自己的 css 文件，如下所示:

.currency-select {
    position: absolute;
    top: 5px;
    right: 80px;
    z-index: 1000000;
    color: #DD642A;
    font-size: 17px;
    padding-right: 16px;
    width: 130px;
}

.mat-form-field {
    display: block;
}

这对选择器来说完全符合预期，直到它被点击并出现下拉菜单。 html如下:

<div class="currency-select">
  <mat-form-field *ngIf=loaded>
    <mat-select [formControl]="currencyForm" placeholder="Select Currency">
      <select-search (search)="filterCurrencyOptions($event)" #selectSearch (keydown)="$event.stopPropagation()" >
      </select-search>
      <mat-option *ngFor="let currency of filteredCurrencies" [value]="currency.counter_currency_code" (click)="updateCurrency()">
          <flag-icon country="{{ (currency.counter_currency_iso_2 || '').toLowerCase() }}"></flag-icon>  {{currency.counter_currency_code}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

当我点击货币选择时，下拉菜单没有出现我想要的样子，而且我似乎无法在 currency-select.component.html 文件中添加任何东西来改变它，相反它似乎从不同的 div 标签“cdk-overlay-container”获取样式。

谁能建议我如何在货币选择 css 文件中为此编写 css？我试过使用 !important 但这也不起作用。

Answer 1

使用 mat-select 输入 panelClass 为下拉叠加层添加一个类。

<mat-select panelClass="myPanel">

然后使用::ng-deep:

::ng-deep .myPanel.mat-select-panel {
  background-color: darkslategray;
}

或者禁用组件的 ViewEncapsulation:

@Component({
  selector: 'select-panel-class-example',
  templateUrl: 'select-panel-class-example.html',
  styleUrls: ['select-panel-class-example.css'],
  encapsulation: ViewEncapsulation.None,
})

.myPanel.mat-select-panel {
  background-color: darkslategray;
}

https://stackblitz.com/edit/angular-k4pxc1