Angular 角度库中的SCSS封装

我想创建一个“可主题化”的角度库，这意味着库的客户可以应用自己的颜色。我已经检查了材质设计是如何进行的，他们所做的是这样的：

在（库）/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”类的东西都将是黄色的，即使它只是碰巧同名

---

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

是的，请检查，

：host

seciton。

那么您的具体建议是什么，用：：ng deep覆盖一些默认值（这将被弃用）？：host将css的范围仅限于您正在使用的组件。实际上，如果没有

：host

，则在加载该组件后，您仍然可以应用该样式表，因此这可能会填充全局。但是，如果未加载此组件，您仍然可以。我们的想法是将css与组件一起编写，但是如何对库进行主题化？您希望稍后加载样式，不希望污染全局，不希望使用前缀，不希望将样式与组件一起放置。您询问是否可以在全局空间中放置样式表，同时将其自动应用于组件，而无需任何标记。如果我没有弄错的话，材质设计类的前缀是

mat

，可能是为了避免同样的问题。所以你可以确保你的类有一个前缀是的，但是如果我的前缀是“bla”，而其他人也用前缀“bla”创建了一个库呢。前缀问题由来已久，这就是为什么我们现在有了视图封装概念。