Angular 库中的 SCSS 封装

Question

我想创建一个“可主题化”的 Angular 库，这意味着该库的客户端可以应用例如他们自己的颜色。我检查了材料设计是如何做到的，他们正在做的是这样的：

在（库）/theming.scss：

@mixin hello-button($theme) {
  $hello-background: map-get($theme, 'hello-background');
  .hello {
    background: $hello-background;
  }
}
@mixin apply-theme($theme) {
  @include hello-button($theme);
}

在（客户端）/styles.scss：

@import '~library/theming';
$theme: (
  'hello-background': yellow
);
@include apply-theme($theme);

但这设置了全局类...这里的“.hello”类是全局的，所以任何有“.hello”类的东西都会是黄色的，即使它只是偶然的同名。

所以我的问题是，有没有办法在没有全局类的情况下自定义 scss，这更符合 Angular 的视图封装精神？我知道我可以使用 ngStyle 设置样式，但我更喜欢 scss 方式。

Answer 1

是的，请查看https://angular.io/guide/component-styles、:host 部分。