将 CSS class 传递给 Angular 库

Question

我正在使用 angular CDK 为自定义模式创建一个库。我希望使用该库的应用程序将 CSS class 名称与模态 window 的其他配置一起传递。这样我就可以在库中像这样应用 class。

  this.overlayContainer.getContainerElement().classList.add(modalConfig.overlayContainerClass);

我可以看到 class 已应用于元素，但 class 不存在。

<div class="cdk-overlay-container overlay-material-design-theme mat-typography custom">

我已经在应用程序组件 CSS 文件中定义了它。

.custom{
  width: 100%;
}

问题是存在于应用程序组件中的 CSS 将如何被库组件访问？

Answer 1

要使 css 类以这种方式工作，您必须将它们放在不存在视图封装的地方。

通常在 src/styles.scss 中。

如果您想要更多结构，可以将它们放在 src/styles.scss 导入的另一个 scss 文件中。

Pass CSS class to Angular Library