更改 mat-spinner-button 的按钮颜色答案

【问题标题】：change the button color of mat-spinner-button更改 mat-spinner-button 的按钮颜色
【发布时间】：2020-04-12 02:08:44
【问题描述】：

我的页面上有一个按钮微调器控件。它只有三种颜色：主要颜色、重音颜色、警告颜色。我想要一个背景按钮颜色，它是我网页的当前颜色。我尝试使用styles.scss中的样式表来改变颜色，但是颜色没有改变

.spinner-button {
background-color: currentColor;

}

以下是我的 HTML 文件中的代码：

 <mat-spinner-button  [options]="spinnerButtonOptions" (btnClick)="LoadData()" class="spinner-button" >
</mat-spinner-button>

以下是我的 .ts 类中的选项：

spinnerButtonOptions: MatProgressButtonOptions = {
    active: false,
    text: 'Load Data',
    spinnerSize: 18,
    raised: true,
    stroked: false,
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    buttonIcon: {
      fontIcon: '3d_rotation'
    }
  }

下面是图片：

我希望加载数据的按钮颜色为绿色，#5B5B39；类似于其他两个按钮：“开始加载”和“FTP”

【问题讨论】：

能否提供自定义mat-spinner-button 的HTML 模板，以及打字稿元数据和CSS？
我不确定您的要求以及如何实现。我的 HTML 和 typescript 和 HTML 都粘贴在上面了。
是mat-spinner-button是你创建的自定义组件吗？
我认为@prashant-pimpale 得到了我的要求并且已经回答了。您应该添加说明您正在使用库called mat-progress-buttons 的信息。这是让您的问题更快得到解决的重要信息。请参阅下面的@prashant-pimpale 的回答。
嘿，我是插件作者，@PrashantPimpale 好心创建了一个 PR describing 如何覆盖默认样式。如果这对您不起作用，请告诉我，我可以通过包本身找到另一种方法来执行此操作。（如果确实有效，请接受他的回答:)）

标签： angular angular-material

【解决方案1】：

您可以覆盖 CSS 并将 ViewEncapsulation 设置为 None：

组件.css：

.mat-raised-button.mat-primary {
    background-color: red;
}

组件.ts：

import { Component, ViewEncapsulation } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation : ViewEncapsulation.None // Here
})

这是工作的demo:)

【讨论】：