How to add custom styles to 3rd party components?

Question

What is the recommended way to customize styles for a 3rd party component that I have downloaded via npm?

For example the component ng2-tag-input. I run a webpack build that bundles all the 3rd party js-files into a vendor.js and all the 3rd party css into a vendor.css.

Since this is generated upon build, I don't want to make changes to vendor.css or commit it.

Say that I want to add my own styles to ng2-tag-input, how does one best do that? Should I just override its styles in my own site.css or is there another way?

Answer 1

Obviously you cannot modify it in node_modules folder because node_modules should never be included in code repository and your changes . So, there are two options:

1. override styles with your own css (more specific rules)
2. do not use npm and include ts/css manually

I actually prefer the second option if I need to alter the component because sometimes compatibility is not guarantee between different plugin versions.

Answer 2

You can use :host >>> .third-party-class.

Use the /deep/ and >>> selectors only with emulated view encapsulation.

source: https://angular.io/guide/component-styles#deep

Answer 3

You can set encapsulation: ViewEncapsulation.none in your outermost component to apply styles globally. Then use that css file as your place for global styles.

app.component.ts:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    // apply styles globally
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
    constructor() {
    }

    ngOnInit() {
    }
}

As @anonymvs mentioned you need to use higher specificity. One easy way to help with this, if you are using sass or similar, is to put all of your styles in a very specific block, eg:

app.component.scss:

$danger: #dc3545;
$info: purple;

body:not(.added-for-higher-specificity) {

.simple-notification {
    &.error {
        background: $danger;
    }

    &.info {
        background: $info;
    }
}

}