角度材料无法找到Angular Material核心主题

Question

在我的Angular2项目中,我从https://material.angular.io/guide/getting-started安装了最新的材质插件.接下来,我将@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';我的css文件添加到我的组件中.但是在我的控制台中Angular显示了这个错误:

material.es5.js:148无法找到Angular Material核心主题.大多数材料组件可能无法按预期工作.欲了解更多信息请参阅主题化指南:https://material.angular.io/guide/theming `

材料组件不起作用.怎么了？

Answer 1

请将以下代码插入到您的src文件夹中的style.css中.

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

您可以在prebuilt-themes文件夹下选择任何css .

Answer 2

我让它使用以下步骤:

1)将此(或其他)材质主题导入主css文件:

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2)还要确保使用app.component文件注册此主css 文件

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3)仔细检查你所需要的组件从进口@角/材料在app.module文件

import { MdCardModule, MdInputModule } from '@angular/material';

Answer 3

将该代码放入angular-cli.json文件中

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

它对我来说很好

Answer 4

将以下行添加到您的src/styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

您也可以尝试其他 Css 类。以下是可用的课程：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

Answer 5

添加：

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

给你的style.css

Answer 6

如果您只需要材质图标并且不想导入整个材质 css，请在根 css 中使用它：

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}