Question

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

例如组件ng2-tag-input。我运行一个webpack构建，将所有第三方js文件捆绑到vendor.js，将所有第三方css捆绑到vendor.css。

由于这是在构建时生成的，因此我不想对vendor.css进行更改或提交它。

假设我想将自己的样式添加到ng2-tag-input，那么最好如何做到这一点？我应该在我自己的site.css中覆盖其样式还是以其他方式？

Answer 1

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

使用您自己的css（更具体的规则）覆盖样式
不要使用npm并手动包含ts / css

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

Answer 2

您可以使用：host＆gt;＆gt;＆gt; 。第三方级。

使用/ deep /和＆gt;＆gt;＆gt;仅使用模拟视图封装的选择器。

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

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

app.component.scss：

$danger: #dc3545;
$info: purple;

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

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

    &.info {
        background: $info;
    }
}

}

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

3 个答案: