Angular Material 3如何全局修改滑块颜色？解决Material2升级兼容问题

Angular Material 3大量使用CSS自定义属性（变量）控制组件样式，无需依赖废弃的::ng-deep就能轻松全局修改滑块颜色，具体操作如下：

• 明确滑块核心CSS变量
  MatSlider的样式由以下关键CSS变量控制：

  • --md-slider-active-track-color: 滑块激活段轨道颜色
  • --md-slider-inactive-track-color: 滑块未激活段轨道颜色
  • --md-slider-thumb-color: 滑块手柄默认颜色
  • --md-slider-pressed-thumb-color: 滑块手柄按下时的颜色
  • --md-slider-activeTick-color: 激活状态的刻度颜色
  • --md-slider-inactiveTick-color: 未激活状态的刻度颜色

• 全局覆盖变量值
  在项目根样式文件（通常是styles.scss或styles.css）中添加代码，替换为你需要的颜色值：

  /* 全局修改所有MatSlider的颜色 */
  mat-slider {
    --md-slider-active-track-color: #2196F3;
    --md-slider-inactive-track-color: #E0E0E0;
    --md-slider-thumb-color: #1976D2;
    --md-slider-pressed-thumb-color: #0D47A1;
    --md-slider-activeTick-color: #1976D2;
    --md-slider-inactiveTick-color: #BDBDBD;
  }
  

• 扩展状态样式（可选）
  如果需要针对hover、focus等状态单独设置颜色，可添加状态选择器：

  mat-slider:hover {
    --md-slider-thumb-color: #0D47A1;
  }
  

这种方式基于Material 3原生设计，无需复杂主题配置，同时规避了::ng-deep的废弃风险，能直接作用于应用内所有滑块组件。

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