css - 范围/隔离/前缀角材质scss样式

Question

问题

我想集成角度材料 scss，但将其范围和隔离以仅将其样式应用于我的应用程序。我需要这个，因为我的 Angular 应用程序将嵌入到一个巨大的整体中。因此，我们需要为我们的应用程序添加前缀 scss 并对其进行限定，因为它可以为应用程序的其他部分设置样式。问题是，如果有人使用与 angular material 相同的类名，样式将通过特异性获胜，这是无法控制的，并且会导致错误。

我们的理念

通过自动为所有选择器添加前缀，样式应该被隔离/限定为仅应用于我们的<my-app></my-app>标签。

生成的样式应如下所示：

my-app .mat-button {}

当前尝试

我们目前的尝试是将它包含在我们需要的地方。它如下所示：

样式.scss

@import "~@angular/material/theming";

my-app {
  @include mat-core();
  @import "~@angular/material/prebuilt-themes/deeppurple-amber";
}

这个解决方案的问题是，范围适用于某些类，但不是全部。

演示/展示

我在stackblitz上创建了一个演示作为展示。

您可以在以下屏幕截图中看到问题：

是否有另一种选择来隔离/限定角度材料样式？

标签： cssangularsassangular-material

Answer 1

应用的样式仍在项目中。如果您想要一些不应该在顶级的应用程序范围的样式styles.scss，请将它们放入app.component.scss并确保所有其他组件都是 app.component.ts 的子级。默认情况下，Angular 范围 (s)css 文件到其相关组件。