在styles.css文件中添加以下代码行:
@import '@angular/material/prebuilt-themes/indigo-pink.css';
或者,如果您使用了SASS,则在styles.scss文件中添加:
@import '@angular/material/theming'; @include mat-core(); $primary: mat-palette($mat-indigo); $accent: mat-palette($mat-pink, A200, A100, A400); $theme: mat-light-theme($primary, $accent); @include angular-material-theme($theme);
使用以下代码更新您的Angular组件或HTML元素类:
Material主题使用CSS变量来对颜色进行处理,您需要使用支持CSS变量的浏览器才能正确使用Material主题。建议使用最新版本的Chrome、Firefox或Edge浏览器。
如果您正在尝试使用Angular材料的工具栏,确保您已经将MatToolbarModule导入到您的模块中:
import { MatToolbarModule } from '@angular/material/toolbar'; @NgModule({ imports: [ MatToolbarModule ] })
通过以上方法,你可以在Angular 11中正确使用Material主题。