Question

我正在使用ng-multiselect-dropdown。如何覆盖CSS？

component.html

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

component.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

Answer 1

默认情况下，Angular向组件CSS文件中添加了_ngcontent-xx，以使其不会与其他组件冲突。

要解决您的问题，您需要在全局 style.css 文件中添加CSS下方，或通过其他方式将组件设为encapsulation: ViewEncapsulation.None，这意味着其CSS不会附加默认的角度的。

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

style.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

component.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  {

}

Here is solution on stackblitz

希望这会有所帮助！

Answer 2

用:host ::ng-deep块包围scss，如下所示：

:host ::ng-deep {
  .multiselect-dropdown {
    background: white
  }
}

Answer 3

您可以尝试这种方式：

: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。

ng-multiselect-dropdown自定义CSS

3 个答案: