我只是将panelClass添加到选择标签中,并在styles.scss中为该类设置样式。
Html:
<mat-form-field>
<mat-select disableOptionCentering panelClass="dropDown-seasons-panel">
<mat-option *ngFor="let season of seasons" [value]="season.value">
{{season.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
styles.scss:
.dropDown-seasons-panel {
border-radius: 10px !important;
border: 1px solid gray !important;
position: absolute !important;
top: 50px !important;
}
请确认,您正在使用CSS还是SCSS。如果您正在使用CSS,则无法正常工作。请更改为SCSS。
我已经在mat-select组件中使用panelClass属性添加了类。通过使用该类,您可以更新CSS
如果您正在使用SCSS,请参阅我的演示- https://stackblitz.com/edit/angular-jhxdfy-piucvw
同时检查您的全局样式CSS文件。可能该CSS会覆盖此CSS。
!important
来添加它们。<mat-select id='myCustomDropdown' placeholder="Favorite food">
<div class="custom-style">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</div>
</mat-select>
style.css
.custom-style .mat-option{
color:red !important
}
(保留HTML)custom-panel
的div包裹起来,然后使用选择器custom-panel.mat-select-panel
гЂ‚ - Adrita Sharma#myCustomDropdown .mat-select-placeholder{ color:red !important }
。 - Adrita Sharma