使用 [ngStyle] 将自定义颜色应用于 mat-raised-button

Question

我想使用自定义的 mat-button 颜色样式，但是当我将它与 [ngStyle] 结合使用时它不起作用。

这就是我要的：

html：

<button mat-raised-button
        [ngStyle]="getDirectionArrowStyle(item.label, 'ltr')"
        value="ltr"
        aria-label="Left To Right"
        (click)="setActiveDirection(item.label, 'ltr')">
   <mat-icon>east</mat-icon>
</button>

css：

.mat-arrow-selected {
  background-color: green;
  color: #fff;
}

.mat-arrow-deselected {
  background-color: red;
  color: #fff;
}

转换工作正常，但颜色不是。

打字稿：

getDirectionArrowStyle(label: string, directionValue: string) {
  const isActiveDirection = this.isActiveDirection(label, directionValue);
  const styles = {
    color: isActiveDirection ? 'arrow-selected' : 'arrow-deselected',
    transform: isActiveDirection ? 'scale(1.2)' : 'scale(0.5)'
  };
  return styles;
}

下面的 html 有效，因此自定义 mat-button 颜色有效。

html：

<button mat-raised-button
        color="arrow-selected"
        value="ltr"
        aria-label="Left To Right"
        (click)="setActiveDirection(item.label, 'ltr')">
   <mat-icon>east</mat-icon>
</button>

我可以使用 *ngIf="isActiveDirection(label, directionValue)" 并有两个按钮元素。 一个是 color="arrow-selected"，另一个是 color="arrow-deselected"，但更简洁的解决方案是通过 [ngStyle]。 所以如果可以的话，我会很高兴。

欢迎所有帮助或提示。

Answer 1

我想你的主题中有那些颜色名称？ color属性是材质控件的特殊属性。 它不是 CSS。 ngStyle返回 CSS。

尝试：

<button mat-raised-button
        [ngStyle]="getDirectionArrowStyle(item.label, 'ltr')"
        [color]="getDirectionColour(item.label, 'ltr')"
        value="ltr"
        aria-label="Left To Right"
        (click)="setActiveDirection(item.label, 'ltr')">
   <mat-icon>east</mat-icon>
</button>

您需要另一个函数来获取颜色名称：

getDirectionColour(label: string, directionValue: string) {
  const isActiveDirection = this.isActiveDirection(label, directionValue);
  return isActiveDirection ? 'arrow-selected' : 'arrow-deselected';
}