Angular Material 15如何同时支持传统与新主题并允许用户切换

1. 先整个全局样式管理服务 #

搞个服务统一管理样式模式，消费者既能全局配置默认样式，也能在单个组件里单独覆盖。

// material-style.service.ts
import { Injectable, Optional, Inject } from '@angular/core';

export const MATERIAL_STYLE_MODE = new InjectionToken<string>('MATERIAL_STYLE_MODE');

@Injectable({ providedIn: 'root' })
export class MaterialStyleService {
  private _mode: 'legacy' | 'new' = 'legacy'; // 默认沿用legacy样式

  constructor(@Optional() @Inject(MATERIAL_STYLE_MODE) defaultMode?: 'legacy' | 'new') {
    if (defaultMode) {
      this._mode = defaultMode;
    }
  }

  set mode(mode: 'legacy' | 'new') {
    this._mode = mode;
  }

  get mode(): 'legacy' | 'new' {
    return this._mode;
  }
}

消费者可以在根模块注入全局默认模式：

// app.module.ts
import { MATERIAL_STYLE_MODE } from './material-style.service';

@NgModule({
  providers: [
    { provide: MATERIAL_STYLE_MODE, useValue: 'new' } // 全局默认启用新样式
  ]
})
export class AppModule {}

2. 组件里用输入属性控制样式 #

在自定义按钮组件中添加输入属性，优先使用组件传入的模式，没有则取服务的全局设置，通过类绑定切换对应的样式类。

// custom-button.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { MaterialStyleService } from './material-style.service';

@Component({
  selector: 'lib-custom-button',
  template: `
    <button 
      [class.customize-button]="currentMode === 'legacy'"
      [class.customize-button-new]="currentMode === 'new'">
      <ng-content></ng-content>
    </button>
  `,
  styleUrls: ['./custom-button.component.scss']
})
export class CustomButtonComponent implements OnInit {
  @Input() styleMode?: 'legacy' | 'new';
  currentMode!: 'legacy' | 'new';

  constructor(private styleService: MaterialStyleService) {}

  ngOnInit(): void {
    // 优先使用组件输入的模式，无输入则用全局配置
    this.currentMode = this.styleMode ?? this.styleService.mode;
  }

  // 加个setter支持动态切换模式
  @Input()
  set mode(mode: 'legacy' | 'new') {
    this.styleMode = mode;
    this.currentMode = mode;
  }
}

消费者使用组件时，可灵活指定样式：

<!-- 沿用全局默认样式 -->
<lib-custom-button>默认样式按钮</lib-custom-button>
<!-- 单独指定新样式 -->
<lib-custom-button mode="new">新样式按钮</lib-custom-button>
<!-- 单独指定legacy样式 -->
<lib-custom-button mode="legacy">传统样式按钮</lib-custom-button>

3. SCSS与主题混合宏配合 #

你已经在apply-custom-material-theme中加了版本判断，现在把两个按钮样式混入宏中，确保主题变量能正确传递：

// custom-button.component.scss
// Legacy按钮样式逻辑
@mixin customize-button($theme) {
  $primary: map-get($theme, primary);
  .customize-button {
    background: mat-color($primary);
    // 你的其他legacy样式代码
  }
}

// 新Material按钮样式逻辑
@mixin customize-button-new($theme) {
  $primary-color: mat.get-color-from-palette($theme.primary);
  .customize-button-new {
    background: $primary-color;
    // 你的其他新样式代码
  }
}

// 将按钮样式融入主题混合宏
@mixin apply-custom-material-theme($theme, $mode: 'legacy') {
  // 你的其他全局主题样式...
  
  @if $mode == 'legacy' {
    @include customize-button($theme);
  } @else {
    @include customize-button-new($theme);
  }
}

4. 动态全局切换（可选） #

如果消费者需要动态切换全局样式，直接调用服务的setter即可；若需主题实时更新，可结合Angular CDK的ThemeObserver或手动触发样式重载：

// 示例：在切换组件中实现模式切换
import { MaterialStyleService } from './material-style.service';

constructor(private styleService: MaterialStyleService) {}

toggleStyleMode() {
  this.styleService.mode = this.styleService.mode === 'legacy' ? 'new' : 'legacy';
  // 如需实时刷新主题样式，可在此处添加重新加载主题的逻辑
}

踩坑提醒 #

• Angular 15+中legacy与新样式的导入需分开：legacy用@angular/material/legacy-theme，新样式用@angular/material/theme，避免冲突
• 组件默认样式封装为Emulated模式，确保类名能正确作用到元素上，尽量避免使用::ng-deep
• 测试两种模式下的样式渲染，排查是否存在样式重叠、继承异常的问题

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