it-swarm.cn

Angular 材料无法找到 Angular 物质核心主题

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

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

材料组件不起作用。怎么了?

53
lukassz

请将以下代码插入 style.css 位于 src 文件夹中。

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

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

106
codelovesme

我让它使用以下步骤:

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

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

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

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

3)仔细检查你需要的组件是从 angular/material app.module file中导入的

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

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

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

它对我来说很好

11
Mohammad Zeeshan

如果您使用的是Angular-CLI,则需要引用主题文件,例如: .angular-cli.json文件中的“candy.scss”。仔细看,你有* .scss吗?这是一个Sass文件。在这里查看信息: Angular材料2主题说明 。因此,在.angular-cli.json中,在styles属性下,在“themes/styles.css”旁边添加“themes/candy.scss”。我的项目中有一个名为“themes”的文件夹。我把styles.css和candy.scss放在themes文件夹中。现在,Angular-CLI可以找到您的主题。

3
LargeDachshund

如果在使用Karma进行测试期间发生这种情况,请将以下pattern添加到karma.config.js文件中的files列表中。

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/Indigo-pink.css', included: true, watched: true}
    ],
    ...
}

有关详细信息,请参阅此处: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

3
The Aelfinn

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

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

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

@import '[email protected]/material/prebuilt-themes/Indigo-pink.css';

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

@import '[email protected]/material/prebuilt-themes/pink-bluegrey.css';

@import '[email protected]/material/prebuilt-themes/purple-green.css';

2
nPcomp

加:

@import "[email protected]/material/prebuilt-themes/Indigo-pink.css"

你的style.css

2
Pulkeet Katiyar

除了上面提到的@import语句。请确保在@Component装饰器中添加封装:ViewEncapsulation.None。

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

如果您正在为.Net核心1.1或2.0 Angular SPA视觉工作室模板寻找Angular Material设置。请找到详细记录的设置说明详细信息 此处

2
Venkatesh Muniyandi

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

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

检查css或scss文件中的任何其他@imports。我遇到了这个问题,在删除其他导入之前无法解决它。

0
BenSimpsy

为我工作添加index.html的css部分

 <link href="node_modules/@angular/material/prebuilt-themes/Indigo-pink.css" rel="stylesheet">

如上所述 这里

0
naila naseem