ng-multiselect-dropdown 自定义 CSS

8

我正在使用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>

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。

你可以将上述CSS添加到全局样式中,即style.css文件中,并删除Angular默认附加的类。 - TheParam
为了覆盖组件样式文件上的全局样式规则,请在组件中添加以下内容:encapsulation: ViewEncapsulation.None, - Joel Joseph
即使将全局样式表添加进去,它仍然无法工作。@TheParam - Santhosh
我添加了封装:ViewEncapsulation.None,但它仍然使用默认的CSS加载。@JoelJoseph - Santhosh
在你的组件样式中添加 !important - Joel Joseph
3个回答

10

Angular 默认会在组件 CSS 文件中添加一些 _ngcontent-xx,以避免与其他组件发生冲突。

要解决问题,您需要将以下 CSS 添加到全局的style.css文件中,或者通过另一种方式将组件设置为 encapsulation: ViewEncapsulation.None,这意味着它的 CSS 不会附加 Angular 的默认类。

解决方案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  {

}

这里提供了一个在stackblitz上的解决方案

希望这能够帮到您!


已将 CSS 添加到全局样式表中,但未生效。 - Santhosh
在 HTML 中,我只有以下代码:<ng-multiselect-dropdown [placeholder]="'选择地区'" [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)" >
</ng-multiselect-dropdown>
- Santhosh
你忘记在开头加上 .container,应该是 .container .multiselect-dropdown .dropdown-btn {。 - Adam

10
你可以尝试这种方法:
    :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。

3
最佳答案,因为它不需要更改全局样式表或组件。 - mjassani
1
优秀的答案在2023年仍然适用。我在ng-multi-select中使用它,需要增加下拉菜单的高度。 - Sudarshan
1
这对我有用。谢谢 - undefined

1

将你的scss代码用:host ::ng-deep包裹起来,像这样:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接