javascript - How can I make a theme-able Angular Material NPM module? - Stack Overflow

admin管理员组

文章数量:1345117

Is it possible to build an npm module that uses Angular Material and allows the ponents it defines to be styled by the consuming app's custom theme?

As an example, say I create an npm module that includes a ponent with the following template:

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

Is it possible to import this ponent into two different apps, each of which defines a custom Angular Material theme, and have the button take on the "accent" color of the current app's theme?

Currently, I'm using ng-packagr to build Angular-friendly npm modules. However, as far as I can tell, this module includes a .scss pilation stage as part of the packaging process, which means any styles defined in the module lose their ability to be customized by a theme in an app that uses the module.

Is it possible to build an npm module that uses Angular Material and allows the ponents it defines to be styled by the consuming app's custom theme?

As an example, say I create an npm module that includes a ponent with the following template:

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

Is it possible to import this ponent into two different apps, each of which defines a custom Angular Material theme, and have the button take on the "accent" color of the current app's theme?

Currently, I'm using ng-packagr to build Angular-friendly npm modules. However, as far as I can tell, this module includes a .scss pilation stage as part of the packaging process, which means any styles defined in the module lose their ability to be customized by a theme in an app that uses the module.

• javascript
• angular
• npm
• angular-material
• angular-material2

Share Improve this question Follow asked Jan 24, 2018 at 16:42 Nathan FriendNathan Friend 12.8k1111 gold badges8080 silver badges129129 bronze badges 1

• 1 I've got material theming working with library ponents. There is a blog post here detailing how to do it (and a code sample). – JayChase Commented Jun 14, 2019 at 2:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

The essentials on how to do this are partly covered by the Angular Material Theming Your Own Components guide. In addition to theming your ponents, your library ("npm module") also needs to provide an entry point for all of its own styling in the same way that the Angular Material library does via its angular-material-theme() mixin. This is normally done by defining a mixin to define styles and call all ponent theming mixins, rather than creating a stylesheet file with style definitions. The mixin takes a theme as a parameter, and uses that theme to define all of its own styling as well as applying theming to any of its ponents. For example, your library might have its own _theme.scss file that any consuming application could import, which would define the mixin:

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

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

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

    // define non-ponent styles
}

The consuming application would need to import your library's theming file, create its own theme, and then call your library's theming mixin.

There is obviously more detail to it, but those are the basics. For reference, I remend you look at how Angular Material does its own theming via GitHub.

Indeed, it is possible. The question just doesn't relate to Angular, it applies to any other framework out there.

Before that, you need to glace over the concept of dependency inversion. Say you are building your apps App1 and App2 and use an npm module lib which contains your reusable ponent. Your apps are built on top of lib meaning your apps are higher level module and lib is lower level module.

If you consider your lib is self-contained then ideally, it should perform same be it used in App1 or App2. But your requirements are - lib should have different behavior (styling in this case) as per the app. It means that you want the higher level module to make some decisions on how the lower level module should behave. So you are inverting dependency and that is dependency inversion principle. Read more about DIP on wikipedia.

Now to achieve DIP, you will need to expose some sort of port/extension from your library and for styling purpose, the simplest way is to expose SCSS mixins. But if you use any build tool like Webpack, rollup or ng-package, then they will always generate piled distributions. You will have to write some extra node.js scripts to package your source code (SCSS here) along with the piled code. These scripts will be executed during pilation/bundling step.

At my work, I am having similar requirements. There are some guidelines you should follow:

1. Components from a library should work out of the box with some default styling.
2. By default, a user of the library should not have to customize the ponent each time.
3. Expose mixins from the ponents for styles.
4. Within mixins, do not put any hardcoded preferences.
5. When developing a themeable ponent, start with default. Override default CSS classes used by the ponent within your applications. Chalk out the mons customizations points/properties and then put it back into the next version of the library. Don't do upfront development within a library. It often results in rework.

We have an enterprise level apps. There are total 5 distinct apps and one privately published npm module that provides mons ponents to all these five apps. But there are some ponents which need to be styled differently which as I said, first override classes in our apps, and then once it feels generic enough to put into mon module, we then put it in next release.

本文标签： javascriptHow can I make a themeable Angular Material NPM moduleStack Overflow