时间戳

首页 > 解决方案 > ng-multiselect-dropdown 自定义 css

html - ng-multiselect-dropdown 自定义 css

问题描述

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

标签： htmlcssangular

解决方案

默认情况下，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的解决方案

希望这会有所帮助！

推荐阅读