时间戳

首页 > 解决方案 > Angular Material 按钮有效，但看起来不是 Material

angular - Angular Material 按钮有效，但看起来不是 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 的新标签。但是，这些按钮看起来并不重要：

在此处输入图像描述

我不打算发布完整的应用程序（还）。我一直在关注官方文档，这很简单，滑块和谷歌按钮的工作应该表明我可能几乎正确地设置了它。

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

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

我不知道这一点是否会分散注意力，但我查看了AM Themes 文档，该文档提出了添加的替代方法

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

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

拒绝应用来自 'http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css' 的样式，因为它的 MIME 类型（'text/html'）不是受支持的样式表 MIME 类型，并启用严格的 MIME 检查

正如我所说，这可能会分散注意力，因为我是从 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.ts（之后 BrowserAnimationsModule，根据上面链接的入门文档）。

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

标签： angularangular-material2

解决方案

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

这是对Angular Material 按钮的更多属性的参考。

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

这是Stackblitz中的工作示例。

推荐阅读