Angular Material v19：基于路由的组件颜色变更与SCSS统一管理咨询

一、处理自定义组件与Material组件路由样式的最佳实践 #

核心思路：路由标记+集中样式管理+优先级覆盖 #

1. 添加路由专属全局类
   在根组件（如AppComponent）中监听路由变化，给<body>添加当前路由对应的类名（如route-dashboard、route-company），让所有组件都能基于这个类编写路由专属样式。
   示例代码（app.component.ts）：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 清除旧的路由类
      document.body.classList.forEach(cls => cls.startsWith('route-') && document.body.classList.remove(cls));
      // 添加当前路由类
      const routeSegment = event.urlAfterRedirects.split('/')[1];
      if (routeSegment) document.body.classList.add(`route-${routeSegment}`);
    });
  }
}

2. 集中管理路由样式变量
   创建单独的SCSS文件（如src/styles/route-styles.scss），统一定义所有路由的颜色配置，方便后续维护：

// 路由专属颜色变量
$dashboard-header-bg: #165DFF;
$dashboard-manage-btn: #4080FF;

$company-header-bg: #00B42A;
$company-manage-btn: #FFFFFF;

3. 通过嵌套选择器覆盖样式
   在全局样式文件（styles.scss）中导入上述变量文件，然后通过路由类嵌套，分别针对自定义组件和带自定义类的Material组件编写样式，利用CSS优先级覆盖默认样式：

@import './styles/route-styles.scss';

// Dashboard路由下的样式
.route-dashboard {
  app-header {
    background-color: $dashboard-header-bg;
  }

  app-header .manage-button.mat-button {
    background-color: $dashboard-manage-btn;
    color: #fff;
  }
}

// Company路由下的样式
.route-company {
  app-header {
    background-color: $company-header-bg;
  }

  app-header .manage-button.mat-button {
    color: $company-manage-btn;
    border: 1px solid $company-manage-btn;
  }
}

这种方式不需要修改组件的ViewEncapsulation设置，既能保持组件样式封装性，又能实现路由级别的样式覆盖。

二、结合Material主题API与自定义组件样式 #

Angular Material的主题API（如mat.button-theme()）可以生成符合Material Design规范的组件样式，结合路由样式的实现方式如下：

1. 在路由样式文件中集成主题API
   修改route-styles.scss，导入Material主题工具，为不同路由定义专属的组件主题片段：

@import '@angular/material/theming';

// 基础颜色变量
$dashboard-header-bg: #165DFF;
$company-header-bg: #00B42A;

// Dashboard路由的按钮主题
$dashboard-btn-palette: mat.define-palette(mat.$blue-palette, 300);
$dashboard-btn-theme: mat.button-theme(
  mat.define-light-theme((color: (primary: $dashboard-btn-palette)))
);

// Company路由的按钮主题
$company-btn-palette: mat.define-palette(mat.$green-palette, 500);
$company-btn-theme: mat.button-theme(
  mat.define-light-theme((color: (primary: $company-btn-palette)))
);

2. 嵌套应用主题混合器
   在全局样式中，将主题混合器嵌套到路由类下，同时补充自定义样式：

@import './styles/route-styles.scss';

.route-dashboard {
  app-header {
    background-color: $dashboard-header-bg;

    .manage-button {
      @include $dashboard-btn-theme;
      // 自定义补充样式
      color: #fff;
    }
  }
}

.route-company {
  app-header {
    background-color: $company-header-bg;

    .manage-button {
      @include $company-btn-theme;
      // 覆盖主题默认颜色
      color: #fff;
    }
  }
}

这种方式既复用了Material主题的样式逻辑（比如按钮的hover、active状态），又能通过路由类实现动态切换，同时可以通过自定义样式调整细节。

3. 组件内样式的补充（可选）
   如果自定义组件（如header.component）需要保留内部样式的封装性，可以在组件的SCSS文件中导入路由变量，通过:host-context()伪类监听全局路由类，实现组件内的动态样式：

@import '../../styles/route-styles.scss';

:host-context(.route-dashboard) {
  background-color: $dashboard-header-bg;
}

:host-context(.route-company) {
  background-color: $company-header-bg;
}

这种方式适合需要在组件内部控制样式逻辑的场景，避免全局样式过于臃肿。

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