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

Question

问题

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

我们的想法

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

生成的样式应如下所示：

my-app .mat-button {}

当前尝试

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

styles.scss

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

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

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

演示/展示

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

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

还有其他选项可以隔离/限定角度材质样式吗？

Answer 1

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