Angular Material v17动态切换mat-slider自定义调色板颜色问题

内置调色板可行实现 #

当使用主题内置的accent/warn调色板时，动态切换逻辑可以正常运行：

模板代码

<mat-slider [color]='sliderPalette()'>
  <input matSliderThumb #s>
</mat-slider>

TypeScript逻辑

/*
 * 主题定义了primary、accent、warn三种调色板。
 */
public sliderPalette() {
  return state ? 'accent' : 'warn';
}

自定义调色板尝试（无效） #

需求改为使用与主题无关的自定义调色板，尝试以下实现后滑块变为静态紫色，无报错：

TypeScript逻辑

/*
 * 与主题无关的自定义调色板。
 */
public sliderPalette() {
  return state ? 'color-palette-state-0' : 'color-palette-state-1';
}

SCSS定义方式1

$color-palette-state-0: mat.define-palette(mat.$blue-palette);
$color-palette-state-1: mat.define-palette(mat.$red-palette);

SCSS定义方式2

$color-palette-state-0: mat.$blue-palette;
$color-palette-state-1: mat.$red-palette;

API差异分析 #

查看Angular Material API发现：

• mat-slider的color属性类型为ThemePalette，仅支持主题内置的primary/accent/warn三种值
• mat-button的color属性类型为string|null，支持自定义值
  推测这是mat-slider的设计限制或bug。

需求 #

寻求无需覆盖内部样式的解决方案，或任何可行的实现方式。

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