Angular Material 组件中的语义颜色

Question

我的 Angular Material v18 应用程序允许用户设置其主题，但一个组件组（“订单控件”）具有“购买”和“出售”两种语义颜色（如天气应用程序中的“冷”和“热”）与主题无关。 这是一个 HTML 版本，它做了它应该做的事情，后面跟着一个不改变颜色的 Angular Material 部分。

如何让 Angular Material 订单控件在选择“买入/卖出”时更改语义颜色，与 HTML 版本类似？

这是 HTML 版本：

<div class="order-control">
  <div>
    <span [class]="buyColor()" (click)="isSell=false">BUY</span>
    <span [class]="sellColor()" (click)="isSell=true">SELL</span>
  </div>
  <div>
    <label for="units">Units</label>
    <input
      [class]="getColor()"
      type="range"
      id="units"
      name="units"
      [min]="unitsMin"
      [max]="unitsMax"
      [(ngModel)]="units"/>
  </div>
  <div>
    <label for="price">Price</label>
    <input
      [class]="getColor()"
      type="range"
      id="price"
      name="price"
      [min]="priceMin"
      [max]="priceMax"
      [(ngModel)]="price"/>
  </div>
  <div>
    <button [class]="getColor()" type="button">Submit order</button>
  </div>
</div>

这里有一个与 Angular Material 类似的版本，但是当选择订单“一侧”（即买入或卖出）时，切换按钮、滑块和提交按钮的颜色应该发生变化：

<div class="order-control">
  <div>
    <mat-button-toggle-group name="side" [(ngModel)]="isSell">
      <mat-button-toggle [value]="false">BUY</mat-button-toggle>
      <mat-button-toggle [value]="true">SELL</mat-button-toggle>
    </mat-button-toggle-group>
  </div>
  <div>
    <label for="units">Units</label>
    <mat-slider
      [max]="unitsMax"
      [min]="unitsMin"
      [step]="unitsStep"
      discrete showTickMarks>
      <input matSliderThumb [(ngModel)]="units" #unitsSlider />
    </mat-slider>
  </div>
  <div>
    <label for="price">Price</label>
    <mat-slider
      [max]="priceMax"
      [min]="priceMin"
      [step]="priceStep"
      discrete showTickMarks>
      <input matSliderThumb [(ngModel)]="price" #priceSlider />
    </mat-slider>
  </div>
  <div>
    <button mat-flat-button>Submit Order</button>
  </div>
</div>

CSS

.order-control {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .sell {
    color: red;
    accent-color: red;
  }

  .buy {
    color: blue;
    accent-color: blue;
  }
}

TypeScript

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ FormsModule, MatButtonModule, MatButtonToggleModule, MatSliderModule ],
  templateUrl: './main.html',
  styleUrl: './main.css',
})
export class App {
  isSell: boolean = false;

  units = 1;
  unitsMin = 1;
  unitsMax = 10;
  unitsStep = 1;

  price = 500;
  priceMin = 0;
  priceMax = 1000;
  priceStep = 25;

  buyColor() {
    return this.isSell ? '' : 'buy';
  }

  sellColor() {
    return this.isSell ? 'sell' : '';
  }

  getColor() {
    return this.isSell ? 'sell' : 'buy';
  }
}

这是工作示例。

Answer 1

我建议不要这样做，因为它会破坏设计：当你实现一个设计系统时，没有“独立组件”，它应该全部遵循提供的设计。

话虽这么说，只要有条件地申请你的课程就可以了？

<mat-button-toggle [value]="true" [class.sell]="isSell">SELL</mat-button-toggle>

Answer 2

您可以尝试为特定组件创建自定义主题，如下所示

@use '@angular/material' as mat;
@include mat.core();

$custom-palette: (
  50: var(--Your-colors),
  ...
)
 
$custom-primary: mat.define-palette($custom-palette, 500)

$theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
  ),
))


$buy: mat.define-palette($theme, 500)

@include mat-button-theme($buy)

.buy-theme {
  @include mat-button-theme($buy);
}

然后在此处添加分配CSS变量的逻辑

--Your-colors