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

Question

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

.spinner-button {
background-color: currentColor;

}

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

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

以下是 my.ts class 中的选项：

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”

Answer 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 :)