要解决Angular Material主题不能改变mat-dialog的强调色的问题,可以使用自定义CSS来覆盖默认的主题样式。
首先,在全局的styles.css或者组件的样式文件中,添加以下CSS代码来覆盖mat-dialog的强调色:
.mat-dialog-container .mat-dialog-actions .mat-button:not([disabled]):hover,
.mat-dialog-container .mat-dialog-actions .mat-raised-button:not([disabled]):hover,
.mat-dialog-container .mat-dialog-actions .mat-flat-button:not([disabled]):hover {
background-color: your-desired-color;
// 更改文本颜色(可选)
color: your-desired-text-color;
}
这段CSS代码将会覆盖mat-dialog中按钮的hover状态的背景颜色。
然后,在使用mat-dialog的组件中,为mat-dialog-actions中的按钮添加一个自定义的CSS类:
接下来,在组件的样式文件中,为自定义的CSS类添加样式:
.custom-dialog-button {
background-color: your-desired-color !important;
// 更改文本颜色(可选)
color: your-desired-text-color !important;
}
通过添加!important来确保自定义的样式优先级高于默认的主题样式。
这样,你就可以自定义mat-dialog的强调色了。记得将"your-desired-color"和"your-desired-text-color"替换成你想要的颜色值。