如何制作一个可主题化的Angular Material NPM模块？

Question

是否可以构建一个使用Angular Material的npm模块,并允许它定义的组件由消费应用程序的自定义主题设置样式？

作为一个例子,假设我创建了一个包含具有以下模板的组件的npm模块:

<button mat-raised-button color="accent">Click me!</button>

是否可以将此组件导入两个不同的应用程序,每个应用程序定义一个自定义的Angular Material主题,并使按钮采用当前应用程序主题的"重音"颜色？

目前,我正在使用ng-packagr来构建Angular友好的npm模块.但是,据我所知,此模块包含一个.scss编译阶段作为打包过程的一部分,这意味着模块中定义的任何样式都无法通过使用该模块的应用程序中的主题进行自定义.

Answer 1

Angular Material Theming Your Own Components指南部分介绍了如何执行此操作的要点。除了为组件设置主题之外，您的库（“npm 模块”）还需要为其所有自己的样式提供入口点，就像 Angular Material 库通过其angular-material-theme()mixin 所做的那样。这通常是通过定义一个 mixin 来定义样式并调用所有组件主题 mixins 来完成的，而不是创建带有样式定义的样式表文件。mixin 将主题作为参数，并使用该主题来定义其自己的所有样式以及将主题应用到其任何组件。例如，您的库可能有自己的_theme.scss文件，任何使用应用程序都可以导入该文件，这将定义 mixin：

@import '~@angular/material/theming';
@import './components/my-component/_my-component-theme'; // component theming file with mixin
@mixin library-theme($theme) {

    @include angular-material-theme($theme); // angular material

    @include my-component-theme($theme); // component theming

    // define non-component styles
}

使用应用程序需要导入库的主题文件，创建自己的主题，然后调用库的主题 mixin。

显然还有更多细节，但这些都是基础知识。作为参考，我建议您查看 Angular Material 如何通过 GitHub 实现自己的主题。