AngularMaterial自定义主题无法工作
- 确保您已正确引用主题文件
在您的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
这些步骤之后，您应该能够使用自定义主题，并且在应用中有效果。