Angular 如何向第三方组件添加自定义样式？

为我通过

npm

下载的第三方组件定制样式的推荐方法是什么

例如，组件

ng2标签输入

。我运行了一个webpack构建，它将所有第三方js文件捆绑到vendor.js中，并将所有第三方css捆绑到

vendor.css

中

因为这是在构建时生成的，所以我不想对

vendor.css进行更改或提交它

假设我想将我自己的样式添加到
ng2标记输入中
，那么如何才能最好地做到这一点？我应该在我自己的
站点.css中重写它的样式吗？
或者有其他方法吗？
显然，您不能在node\u modules文件夹中修改它，因为node\u modules永远不应该包含在代码库和您的更改中。
因此，有两种选择：

使用您自己的css覆盖样式（更具体的规则）
不要使用npm并手动包含ts/css
如果我需要更改组件，我实际上更喜欢第二个选项，因为有时不同插件版本之间的兼容性无法保证。
您可以使用：host>>。第三方类

仅在模拟视图封装中使用/deep/和>>>选择器

源：
您可以在最外面的组件中设置
封装：ViewEncapsulation.none
，以全局应用样式。然后将该css文件用作全局样式的位置

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() {
    }
}

正如@anonymvs提到的，您需要使用更高的特异性。如果您使用的是sass或类似软件，一个简单的方法就是将所有样式放在一个非常特定的块中，例如：

app.component.scss：

$danger: #dc3545;
$info: purple;

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

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

    &.info {
        background: $info;
    }
}

}

不幸的是，
/deep/
、
>
和
：：ng deep
都被弃用，因此唯一的选择是以更高的特异性覆盖样式：(