在您的styles.scss或styles.css文件中,确保以下代码:
@import '~@angular/material/theming';
为了使自定义主题在应用程序中生效,请在styles.scss或styles.css文件中创建并指定新的主题样式:
@import '~@angular/material/theming';
// 定义主题颜色 $my-app-primary: mat-palette($mat-blue, 600); $my-app-accent: mat-palette($mat-teal, 500, 600, A200); $my-app-warn: mat-palette($mat-red);
// 将主题应用于Angular Material组件 $my-app-theme: mat-light-theme( ( color: ( primary: $my-app-primary, accent: $my-app-accent, warn: $my-app-warn, ), ), );
// 使用新的主题 @include angular-material-theme($my-app-theme);
在package.json文件中,确保您已安装了所有需要的依赖项,尤其是@angular/material和@angular/cdk。
运行以下命令确保它们已安装:
npm install --save @angular/material @angular/cdk
删除Angular编译器缓存以确保使用新的样式。 可以运行以下命令:
ng build --aot --deleteOutputPath=false
这些步骤之后,您应该能够使用自定义主题,并且在应用中有效果。