如何实现Angular Material订单控件随买卖选择切换语义颜色？

我的Angular Material v18应用支持用户自定义主题，但「订单控件」组件组需要两个独立于主题的语义颜色：买入（BUY）为蓝色，卖出（SELL）为红色（类似天气应用冷蓝暖红的逻辑）。目前HTML版本能正常切换颜色，但Angular Material版本无法实现该效果，如何让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';
  }
}

Angular Material组件自带高优先级样式，直接添加自定义类无法覆盖，需结合组件内置类和状态上下文实现样式切换，具体修改如下：

1. 模板修改 #

将动态状态类绑定到最外层容器，统一控制所有子组件的样式上下文：

<div class="order-control" [class.buy]="!isSell" [class.sell]="isSell">
  <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>

2. CSS样式修改 #

针对Material组件的内部元素编写穿透样式，覆盖默认主题颜色：

.order-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

/* 买入状态样式 */
.order-control.buy {
  /* 按钮切换组选中状态 */
  & .mat-button-toggle-checked {
    background-color: blue;
    color: white;
  }
  /* 滑块样式 */
  & .mat-slider-thumb {
    background-color: blue;
  }
  & .mat-slider-track-fill {
    background-color: blue;
  }
  /* 扁平按钮 */
  & .mat-mdc-flat-button {
    --mdc-filled-button-container-color: blue;
    --mdc-filled-button-label-text-color: white;
  }
}

/* 卖出状态样式 */
.order-control.sell {
  /* 按钮切换组选中状态 */
  & .mat-button-toggle-checked {
    background-color: red;
    color: white;
  }
  /* 滑块样式 */
  & .mat-slider-thumb {
    background-color: red;
  }
  & .mat-slider-track-fill {
    background-color: red;
  }
  /* 扁平按钮 */
  & .mat-mdc-flat-button {
    --mdc-filled-button-container-color: red;
    --mdc-filled-button-label-text-color: white;
  }
}

说明：

• 使用Material组件内置类（如.mat-button-toggle-checked、.mat-slider-thumb）定位内部元素
• 通过父容器的.buy/.sell类实现状态切换的样式隔离
• 对于MD风格按钮，使用官方提供的CSS变量修改颜色，符合组件设计规范

3. 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;
}

效果说明 #

修改后切换BUY/SELL状态时：

• 选中的mat-button-toggle会切换为对应语义色
• mat-slider的滑块和填充轨道同步切换颜色
• mat-flat-button的背景与文字颜色匹配当前状态
• 所有颜色独立于应用主题，不会被自定义主题覆盖

内容的提问来源于stack exchange，提问作者Jan Nielsen