如何设置角度材质的样式，选择下拉叠加层

Question

我有一个称为currency-selector的角度组件，它有自己的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”中获取样式。

[有人可以建议我如何在Currency-Select CSS文件中为此编写CSS吗？我尝试使用！important，但这还是行不通的。

Answer 1

要为下拉式叠加层设置样式，请使用mat-select输入panelClass向其中添加一个类。

<mat-select panelClass="myPanel">

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

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

Answer 2

尝试使用ng-deep

::ng-deep .your-class-name {
  ...
}

PS：ng-deep将在其他版本中弃用。 W3C尚未为其定义“替换”。