Angular-Material，如何更改选定的mat-option的颜色。_编程开发

Angular-Material，如何更改选定的mat-option的颜色。

创始人

2024-10-21 06:01:19

0次

要更改选定的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时要小心，并确保只在必要的情况下使用，以避免潜在的样式冲突。

上一篇：Angular-material自动完成不显示列表框的选项。

下一篇：Angular-Material：mat-radio-button的模板错误

Angular-Material，如何更改选定的mat-option的颜色。

相关内容

热门资讯