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

Question

为我通过npm下载的第三方组件自定义样式的推荐方式是什么

例如，组件ng2-tag-input。我运行了一个webpack构建程序，它将所有第三方js-file捆绑到一个vendor.js中，并将所有第三方css打包到一个vendor.css中。

因为这是在构建时生成的，所以我不想更改vendor.css或提交它。

假设我想把我自己的样式添加到ng2-tag-input中，怎么做才是最好的呢？我应该在我自己的site.css中覆盖它的样式吗?或者有其他方法吗？

Answer 1

显然，您不能在node_modules文件夹中修改它，因为node_modules永远不应该包含在代码存储库和您的更改中。因此，有两种选择：

1. 使用自己的css覆盖样式(更具体的规则)
2. 不使用npm并手动包含ts/css

如果我需要更改组件，我实际上更喜欢第二种选择，因为有时不同的插件版本之间不能保证兼容性。

Answer 2

您可以使用:host >>> .third-party-class。

只将/deep/和>>>选择器与模拟视图封装一起使用。

来源：https://angular.io/guide/component-styles#deep

Answer 3

您可以在最外面的组件中设置encapsulation: 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() {
    }
}

正如@匿名者提到的，你需要使用更高的特异性。如果你正在使用sass或类似的工具，一个简单的方法就是将你所有的风格放在一个非常具体的块中，例如：

app.component.scss：

$danger: #dc3545;
$info: purple;

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

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

    &.info {
        background: $info;
    }
}

}