изменить цвет кнопки мата-прядильщика

Question

У меня есть кнопка управления вращением на моей странице. Он поставляется только с тремя цветами: основной, акцент, предупреждение. Я хочу цвет фона кнопки, который является текущим цветом моей веб-страницы. Я пытался изменить цвет с помощью таблицы стилей в styles.s css, но цвет не изменился

.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'
    }
  }

Ниже приведено изображение:

I хотите, чтобы цвет кнопки «Загрузить данные» был зеленым, # 5B5B39; аналогично двум другим кнопкам: «Начать загрузку» и «FTP»

Answer 1

Вы можете переопределить CSS и установить ViewEncapsulation на None:

Component. css:

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

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