如何以自己的方式设置 Angular 10 Material Select（和其他）的样式答案

【问题标题】：How can I style Angular 10 Material Select (and others) in my own way如何以自己的方式设置 Angular 10 Material Select（和其他）的样式
【发布时间】：2020-09-21 18:56:21
【问题描述】：

我正在尝试赋予我的角材质下拉菜单自己的风格。我正在使用 Angular 10。我做了很多研究并尝试了很多我可以在 Stackoverflow 和其他网站上找到的东西，但是当我从互联网上复制方法时，我的 mat-select 的样式并没有改变。这是我当前的代码：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';


interface Radius {
  value: number;
  viewValue: string;
}

@Component({
  selector: 'app-landing-page',
  animations: [],
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.scss'],

  encapsulation: ViewEncapsulation.None
})
export class LandingPageComponent implements OnInit { // The dropdown menu containing component
  // .....

  radiusList: Radius[] = [
    {value: -1, viewValue: "Nothing"},
    {value: 5, viewValue: "5km"},
    {value: 10, viewValue: "10km"},
    {value: 15, viewValue: "15km"},
    {value: 25, viewValue: "25km"},
    {value: 50, viewValue: "50km"},
    {value: 100, viewValue: "100km"},
  ]
  selectedRadius: Radius;
  
  
  // .....
}

// ---------------------------------
// app.module.ts

import {MatSelectModule} from '@angular/material/select'; 
// ...

@NgModule({
  declarations: [
    AppComponent,
    LandingPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,

    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.test.mat-select-panel {
    background: red; // also background-color does not work
}

<mat-form-field appearance="fill">
    <mat-label>Umkreis</mat-label>
    <mat-select panelClass="test" [(ngModel)]="selectedRadius" name="radius">
        <mat-option *ngFor="let radius of radiusList" [value]="radius.value">
            {{radius.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

有人可以提示我如何设置下拉菜单的样式吗？如果我使用 Angular Material 中的其他组件，这是否会在任何地方都一样？

提前谢谢你！

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您必须在 CSS 中使用 ::ng-deep 选择器。

例如：

::ng-deep .mat-select-panel {
    background: red; // also background-color does not work
}

但是请注意，::ng-deep 强制将样式通过子组件树向下传递到所有子组件视图中，并且根据官方文档，这种方式已被弃用。

您可以找到更多信息here

【讨论】：

【解决方案2】：

只需将您的样式放在应用级别的styles.scss 文件中

【讨论】：

谢谢你这个作品，但我不明白为什么。你对此有什么解释吗？
我认为这些样式是在所有组件编译后全局应用的，所以它覆盖了材质样式