javascript - 如何制作可主题化的 Angular Material NPM 模块？

Question

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

例如，假设我创建了一个 npm 模块，其中包含一个具有以下模板的组件:

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

是否可以将此组件导入到两个不同的应用程序中，每个应用程序都定义了 a custom Angular Material theme ，并让按钮采用当前应用主题的“强调”颜色？

目前，我正在使用 ng-packagr构建对 Angular 友好的 npm 模块。然而，据我所知，这个模块包含一个 .scss 编译阶段作为打包过程的一部分，这意味着模块中定义的任何样式都失去了由主题定制的能力使用该模块的应用程序。

Answer 1

Angular Material Theming Your Own Components 部分介绍了如何执行此操作的要点。指导。除了为您的组件设置主题之外，您的库(“npm 模块”)还需要为其所有样式提供一个入口点，就像 Angular Material 库通过其 angular-material-theme() 所做的一样 混合。这通常是通过定义一个 mixin 来定义样式并调用所有组件主题 mixin 来完成的，而不是创建一个带有样式定义的样式表文件。 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
}

消费应用程序需要导入您的库的主题文件，创建自己的主题，然后调用您的库的主题混合。

显然还有更多细节，但这些都是基础知识。作为引用，我建议您看看 Angular Material 如何自己做 theming通过 GitHub。