Angular Material 按钮颜色未改变。

Question

大家好，我遇到一个问题，Angular材料按钮的颜色在某些情况下不起作用，就像这样：

html：

<mat-card>
  <mat-spinner *ngIf="isLoading"></mat-spinner>
  <form [formGroup]="form" (submit)="onLogin()" *ngIf="!isLoading">
    <mat-form-field>
      <input matInput type="email" formControlName="email" placeholder="Email">
      <mat-error *ngIf="form.get('email').invalid">Please enter a valid email.</mat-error>
    </mat-form-field>

    <mat-form-field>
      <input matInput type="password" formControlName="password" placeholder="Password">
      <mat-error *ngIf="form.get('password').invalid">Please enter a valid password.</mat-error>
    </mat-form-field>

    <mat-action-row>
      <!-- NOT COLORED-->
      <button mat-raised-button type="submit" color="warn">Login</button>
    </mat-action-row>

  </form>
  <!-- COLORED-->
  <button mat-raised-button type="submit" color="warn">Login</button>
</mat-card>

结果： 如您所见，两个按钮具有相同的代码，但对于其中一个应用了颜色，而另一个没有，我想在我的表单中使用该颜色...有什么解决方案吗？

- rio

Answer 1

我曾经遇到过 mat-select 和 mat-options 组件的类似问题。我知道这篇文章已经有一段时间了，但这仍然是一个常见的问题。有时候当你给一个 Material 组件添加样式时，它就是不起作用。

对我来说，我通过将与 Material 相关的样式移动到全局样式表中，成功让它工作了。这似乎是一种可靠的方法。

- emoore

---

你是指 styles.css 吗？ - Mawg says reinstate Monica

Answer 2

问题通过添加以下内容来解决：

 this.form = this.fb.group({
      email: ['', [Validators.required]],
      password: ['', [Validators.required]]
    });

在 component.ts 文件中

- rio

---

请解释为什么以及如何解决了您的问题。 - G. Tranter

然后接受您自己的答案。这将有助于未来阅读此问题的其他人。 - Mawg says reinstate Monica