在Angular 8中使用Material库自定义选择选项样式的方法如下:
ng add @angular/material
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatSelectModule,
MatOptionModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Select an option
{{ option.label }}
.mat-option {
background-color: #f1f1f1;
color: #333;
}
请注意,您可以根据自己的需求进行更多的样式定制。您可以使用Chrome开发者工具来检查选择选项中的元素和类,并通过修改这些类来自定义样式。
这是一个简单的示例,展示了如何使用Angular Material库自定义选择选项样式。您可以根据自己的需求进行更多的样式定制和修改。