CODEWITHSUNDEEP
cssangularnode-modules
Chris Tarasovs
Chris Tarasovs

Reputation: 695

How to override CSS or re-skin for node_module?

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 enter image description here

Any suggestion?

Upvotes: 1

Views: 10658

Answers (3)

Cuberice
Cuberice

Reputation: 11

This component is extended in the ngx set of components (https://www.npmjs.com/package/ngx-color-pickerngx-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

Upvotes: 1

Chris Tarasovs
Chris Tarasovs

Reputation: 695

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.

Upvotes: 1

Vojtech
Vojtech

Reputation: 2816

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.

Upvotes: 1

Related Questions