要使用Angular Material主题的所有颜色,可以按照以下步骤进行操作:
ng add @angular/material
app.module.ts
)中导入MatButtonModule
和MatIconModule
模块,并将它们添加到imports
数组中。import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [MatButtonModule, MatIconModule],
exports: [MatButtonModule, MatIconModule]
})
export class AppModule { }
MatThemePalette
接口来定义新的颜色。在组件的样式文件中,可以通过选择器和属性来定义自定义颜色。以下是一个示例:@import '~@angular/material/theming';
$custom-theme: mat.define-palette(mat.purple, 500, 300, 700);
@include mat.define-theme($custom-theme);
.custom-color {
color: mat-color($custom-theme);
background-color: mat-color($custom-theme, lighter);
}
然后,可以在组件的模板文件中使用新定义的颜色:
这样就可以使用Angular Material的主题中的所有颜色了。