在HTML文件中,可以通过添加CSS类或ID来选择BODY标签并应用Angular Material主题。以下是一些示例代码:
在HTML文件中的BODY标签上添加一个自定义的CSS类,然后使用该类选择器来应用Angular Material主题。
HTML代码:
CSS代码:
/* 在全局CSS文件中 */
.my-theme {
@import '~@angular/material/theming';
// 定义Angular Material主题
@include mat-core();
@include angular-material-theme($my-theme);
}
// 定义自定义主题颜色
$my-theme: (
primary: mat-palette($mat-indigo),
accent: mat-palette($mat-pink, A200, A100, A400),
);
// 引入Angular Material样式
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
在HTML文件中的BODY标签上添加一个自定义的ID,然后使用该ID选择器来应用Angular Material主题。
HTML代码:
CSS代码:
/* 在全局CSS文件中 */
#my-theme {
@import '~@angular/material/theming';
// 定义Angular Material主题
@include mat-core();
@include angular-material-theme($my-theme);
}
// 定义自定义主题颜色
$my-theme: (
primary: mat-palette($mat-indigo),
accent: mat-palette($mat-pink, A200, A100, A400),
);
// 引入Angular Material样式
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
这些示例代码会在全局CSS文件中定义一个自定义的CSS类或ID,并在Angular Material主题中引入该类或ID。然后,通过在BODY标签上添加该类或ID,即可应用Angular Material主题。请注意,您需要根据自己的实际需求进行自定义主题颜色的设置。