要更改选定的mat-option的颜色,可以使用Angular Material提供的样式类来自定义选定的颜色。
首先,在组件的CSS文件中添加以下代码来自定义选定的颜色:
::ng-deep .mat-select-value {
color: red; /* 更改选定的文字颜色 */
}
::ng-deep .mat-select-arrow {
color: blue; /* 更改选定的箭头颜色 */
}
::ng-deep .mat-select-panel mat-option.mat-selected {
background-color: yellow; /* 更改选定的背景颜色 */
}
接下来,使用mat-select和mat-option来创建一个选择框,并将mat-select的color属性设置为primary或accent,以应用选定的颜色。
Option 1
Option 2
Option 3
你可以根据需要自定义选定的颜色,只需在CSS中更改相应的颜色值即可。
请注意,::ng-deep是Angular提供的一个特殊选择器,它可以用来穿透组件的样式封装,以便自定义Angular Material组件的样式。但是,请注意在使用::ng-deep时要小心,并确保只在必要的情况下使用,以避免潜在的样式冲突。