Angular 2+ 主题按钮颜色不起作用

Question

我有一个 stackblitz 示例这里 我相信是按照 Angular 主题文档 设置的，但以下代码中的颜色未显示：

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>

更重要的是，我是 stackblitz 的新手，找不到 body 标签在哪里（它不在 index.html 中？！），所以我为 my-app 标签分配了类“mat-app-background” :

<my-app class="mat-app-background">loading</my-app>

我浏览了几个 SO 条目（例如 this）和 github 问题页面（例如 this），但似乎没有一个与我的问题或当前问题相关。非常感谢任何帮助。

Answer 1

您在这里忘记的是导入

MatButtonModule

，例如：

import {MatButtonModule} from '@angular/material/button';

然后在导入数组中偏离路线

imports: [ BrowserModule, FormsModule, MatButtonModule ]

在你的

app.module.ts

中，因为你这里只有一个模块。

另外，一定要在 styles.css 中导入主题

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

这里是stackblitz

Answer 2

我使用 ng add @angular/material 向我的项目（

Angular 9

）添加了材料，并遇到了同样的问题。

要修复它，我添加了以下依赖项，手动添加到

package.json

:

"@angular/material-moment-adapter": "^9.2.2"

希望这能帮助任何遇到新版本或使用

ng add

命令问题的人。

Answer 3

对我来说，按钮在Angular 12中工作正常，但按钮显示白色（未应用颜色，例如：主要等..）

命令：

 ng add @angular/material

现在对我来说工作得很好。

Answer 4

只需重新启动应用程序即可工作。

Answer 5

尝试这样：

npm install @angular/material-moment-adapter

帮我解决了这个问题（Angular 12）。此外，导入地点也发生了变化：

import { MatButtonModule } from '@angular/material/button';

Answer 6

导入 MatButtonModule 后的事件对我不起作用（按钮颜色不存在），当我导入 FormsModule 和 ReactiveFormsModule 时，它起作用了。