ng-multiselect-dropdown 自定义 CSS

Question

我正在使用 ng-multiselect-dropdown 。我怎样才能覆盖CSS？

组件.html

 <ng-multiselect-dropdown [placeholder]="'Select Region'"
    [data]="dropdownList" [(ngModel)]="selectedItems"
    [settings]="dropdownSettings" (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)" >
</ng-multiselect-dropdown>

组件.css

     .multiselect-dropdown[_ngcontent-c5] .dropdown-btn[_ngcontent-c5] {
        display: inline-block;
        border: 1px solid #adadad;
        width: 100%;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.1;
        text-align: left;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border-radius: 4px;
   }

我需要用上面的 CSS 代码覆盖默认的 CSS

原文由 Santhosh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Angular 默认添加一些 _ngcontent-xx 到你的组件 CSS 文件中，这样它就不会与其他组件冲突。

要解决您的问题，您需要在全局 style.css 文件中添加以下 CSS 或以其他方式使您的组件成为 encapsulation: ViewEncapsulation.None 这意味着它的 CSS 不会附加 Angular 的默认类。

解决方案 1 ：添加全局样式表。

样式.css

 .multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
}

解决方案2 制作组件 ViewEncapsulation.None

组件.ts

 import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None // Add this line
})
export class AppComponent  {

}

这是关于 stackblitz 的解决方案

希望这会有所帮助！

原文由 TheParam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以试试这样：

     :host ::ng-deep .multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
}

您可以通过 :host 和 ::ng-deep 覆盖任何节点模块或库的 css。

原文由 JP_ 发布，翻译遵循 CC BY-SA 4.0 许可协议