如何样式 Angular Material select 下拉覆盖

Question

我有一个名为 currency-select 的 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;
}

这完全符合 selector 的预期，直到它被点击并出现下拉菜单。 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>

当我点击货币 select 时，下拉菜单没有按我希望的方式显示，而且我似乎无法在货币 select.component.html 文件中添加任何内容改变它，相反，它似乎采用了不同的 div 标签 "cdk-overlay-container".

的样式

任何人都可以建议我如何在 currency-select css 文件中为此编写 css 吗？我试过使用 !important 但这也不起作用。

Answer 1

尝试使用 ng-deep

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

PS：ng-deep 将在以后的版本中弃用。 W3C 尚未为其定义 'replacement'。

答案更新 (07-07-2021)：如果您不想使用 ng-deep（已弃用），请使用 ViewEncapsulation.None：angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 2

要设置下拉叠加层的样式，请使用 mat-select 输入 panelClass 添加一个 class。

<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

如何样式 Angular Material select 下拉覆盖

How to style Angular Material select drop down overlay

html

css

angular-material2

angular