Angular Material 按钮有效，但看起来不正常 Material

Question

所以，我才刚刚开始使用 Angular Material。

我在我的新应用程序中添加了两个按钮和一个滑块：

<button class="mat-button"  color="accent">An Angular Material button</button>
<hr>

<a mat-button href="https://www.google.com/" target="_blank">Google</a>
<hr>

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

滑块滑动，单击 Google 按钮会启动一个带有 Google 的新选项卡。但是，按钮看起来不像 material:

我不打算 post 完整的应用程序（目前）。我一直在关注 official documentation，这很简单，而且滑块和 Google 按钮工作的事实应该表明我可能已经几乎正确地设置了它。

唯一的问题当然是按钮的外观。

根据文档，我已将 @import "~@angular/material/prebuilt-themes/indigo-pink.css"; 添加到我的 styles.css。我也尝试删除波浪号，但没有效果。

我不知道这是否会分散注意力，但我查看了 AM Themes documentation，它建议添加

的替代方法

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

给我的 index.html。但是，这给出了一个错误：

Refused to apply style from 'http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

正如我所说，这可能会分散注意力，因为我是从 CLI 创建项目的。

ng nw
ng 添加@angular/material

我有一个文件material.module.ts

import {MatButtonModule} from "@angular/material/button";
import {MatSliderModule} from "@angular/material/slider";

const materialModules =  [MatButtonModule, MatSliderModule,];

@NgModule({
  imports: materialModules,
  exports: materialModules,
})
export class MaterialModule{}

而且，显然，我将其导入我的 app.modules.ts（after BrowserAnimationsModule，按照上面链接的入门文档）。

知道我可能做错了什么，或者您需要完整的代码（或只需要某些文件）吗？

Answer 1

您只需将属性“mat-raised-button”添加到您的按钮。

这里是对Angular Material buttons更多属性的引用。

<button class="mat-button" mat-raised-button  color="accent">An Angular Material button</button>

这是 Stackblitz 中的工作示例。

Angular Material 按钮有效，但看起来不正常 Material

Angular Material button works, but does not look Material

angular

angular-material2