角材料缺少按钮样式答案

【问题标题】：Angular material missing buttons styling角材料缺少按钮样式
【发布时间】：2021-06-04 11:09:43
【问题描述】：

刚开始学习 Angular 材料并立即陷入按钮样式问题。

我已将 MatButtonModule 添加到我的应用中。

模块代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { View1Component } from './view1/view1.component';
import { View2Component } from './view2/view2.component';
import { View3Component } from './view3/view3.component';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [View1Component, View2Component, View3Component],
  imports: [
    CommonModule, MatButtonModule
  ]
})
export class HeaderModule { }

在模板中添加了标记。模板

<p>view2 works!</p>

<button mat-button color="primary">Angular Material Button</button><br/><br>
<button mat-raised-button>Raised button</button><br><br>
<button mat-flat-button>Flat button</button><br><br>
<button mat-stroked-button>Stroked button</button><br><br>
<button mat-icon-button>Icon button</button><br><br>
<button mat-fab>Fab button</button><br><br>
<button mat-mini-fab>Mini Fab button</button><br><br>

但是得到了奇怪的结果： Rendering result

在不同的浏览器中检查，在StackBlitz 中尝试了类似的代码 - 得到了相同的结果...但希望按钮的样式类似于this

谁能帮我解决这个问题？谢谢！

更新

当我安装“@angular/material”库时，使用 Angular CLI 将粉色主题自动添加到“angular.json”中。

...
"styles": [
 "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
 "src/styles.css"
 ],
...

更新 2

我已按照建议将以下内容添加到 styles.css 中并且有效！

@import '@angular/material/prebuilt-themes/indigo-pink.css';

但是仍然不清楚为什么“angular.json”中的导入不起作用......

【问题讨论】：

标签： angular angular-material

【解决方案1】：

styles.css 中可能缺少导入：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

【讨论】：

我已经添加了你提到的导入并且它有效！但仍然不明白为什么它以前不起作用，因为当我安装“@angular/material”库时，使用 Angular CLI 将粉色主题自动添加到“angular.json”中......"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css" ],跨度>
@DmitriiMeico，您在项目中使用的是 CSS 还是 SASS / SCSS？

【解决方案2】：

我认为这可能是因为两件事。

您缺少一个 Material 主题：https://material.angular.io/guide/theming

您可以通过将 Material 主题导入您的根 SCSS 文件来添加一个。样式文件。要么在样式下的 angular.json 文件中声明一个。

一旦您的主题就位，还可以尝试为其余按钮添加颜色属性。

【讨论】：

是的，这是主题导入的问题。谢谢！