angular - 如何将自定义样式添加到 3rd 方组件？

Question

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

例如组件ng2-tag-input。我运行一个 webpack 构建，将所有第 3 方 js 文件捆绑到 vendor.js 中，将所有第 3 方 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() {
    }
}

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

app.component.scss：

$danger: #dc3545;
$info: purple;

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

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

    &.info {
        background: $info;
    }
}

}