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

Angular Material button works, but does not look Material

所以,我才刚刚开始使用 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 创建项目的。

我有一个文件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.tsafter BrowserAnimationsModule,按照上面链接的入门文档)。

知道我可能做错了什么,或者您需要完整的代码(或只需要某些文件)吗?

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

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

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

这是 Stackblitz 中的工作示例。