如何让Angular类库继承宿主根应用的Angular Material主题？

核心思路 #

Angular Material的主题系统基于SCSS变量、混合器和CSS自定义属性，类库无需硬编码根主题的路径，只需依赖Material提供的主题上下文，就能自动继承根应用的主题样式。

具体实现步骤 #

1. 类库组件样式依赖Material主题上下文

在类库组件的SCSS文件中，不要直接导入根应用的主题文件，而是通过@use引入Angular Material的SCSS模块，使用其提供的混合器或变量定义组件样式，示例：

@use '@angular/material' as mat;

.my-library-component {
  background-color: mat.get-color-from-palette(mat.$primary-palette, 500);
  color: mat.get-color-from-palette(mat.$warn-palette, contrast);
}

这种方式下，组件会自动读取根应用已加载的主题变量，无需指定根主题的具体路径。

2. 配置类库的样式解析路径

如果使用ng-packagr构建类库，在ng-package.json中添加样式包含路径，确保类库能正确解析Material的SCSS模块：

{
  "lib": {
    "styleIncludePaths": ["node_modules/@angular/material"]
  }
}

此配置不会将Material主题样式打包进类库，而是让类库依赖根应用提供的主题上下文。

3. 根应用侧全局加载主题

根应用只需在全局样式文件（如styles.scss）中正常定义并应用Material主题即可，示例：

@use '@angular/material' as mat;

// 定义主题色板
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// 生成主题
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

// 全局应用主题
@include mat.all-component-themes($my-theme);

根应用加载主题后，类库组件会自动继承主题的颜色、字体等样式，无需额外配置。

4. 样式隔离的兼容处理

Angular默认的ViewEncapsulation.Emulated隔离模式已能支持主题样式渗透，若类库组件使用了ViewEncapsulation.None，则主题样式会直接作用到组件，无需额外调整。

原方案的问题分析 #

你之前尝试的直接导入根主题路径的方式，会让类库与根应用的文件结构强耦合，一旦根应用的主题文件位置变更，类库的引用就会失效。而利用Material的SCSS变量机制，类库只依赖Material的核心样式系统，不绑定具体文件路径，实现了类库与根应用的解耦。

内容的提问来源于stack exchange，提问作者Fabian Röhrle