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

Question

我的页面上有一个按钮微调控件。它只有三种颜色:主色、强调色、警告色。我想要一个背景按钮颜色，它是我的网页的当前颜色。我尝试使用 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”

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