Question

刚开始学习 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

我已按照建议将以下内容添加到 style.css 中，并且可以正常工作！

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

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

Answer 1

可能在 styles.css 中缺少导入：

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

Answer 2

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

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

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

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

角形材料缺少按钮样式

2 个答案: