如何覆盖CSS或为node_module换皮肤？

Question

I have a node_module https://github.com/Alberplz/angular2-color-picker that I am using in my angular 2 project, but as all modules it includes it's CSS files and if I do inspect element i see in listed as localhost, but can't actually locate where they are.

I could create a separate file and overwrite but than I making a bigger mess as putting CSS on top of CSS and I would like to re skin the module.

This is how the CSS looks now

Any suggestion?

Answer 1

If you look into the repository of that project you can locate style here . The compiled style is imported to directive here . I don't see any example of changing color picker style other than this options .

If you want to override the style you might have to use some "shadow DOM breaking" solution or global style that will override it with more specific selector, eventually an !important keyword.

Answer 2

This component is extended in the ngx set of components ( https://www.npmjs.com/package/ngx-color-picker ngx-color-picker ) and I have been able to set styling by overriding style in a tag in the Index.html in Angular 5 application. The style tag must be below the body tag

Answer 3

Basically the steps I understand to overwrite a module is to:

1. Fork the github environment locally
2. Git clone your forked enviorment
3. Register on npm
4. Apply changes to your local and publish on npm under different name
5. Npm install the published npm pacakage.