更改ng-multiselect-dropdown的CSS

Question

我想在ng-multiselect-dropdown中更改CSS。

 <ng-multiselect-dropdown
                  [placeholder]="'Choose'"
                  [data]="dropdownList"
                  [(ngModel)]="selectedItems"
                  [settings]="dropdownSettings"
                  (onSelect)="onItemSelect($event)"
                  (onSelectAll)="onSelectAll($event)"
                   name="domain"

                  >
                </ng-multiselect-dropdown>

在调用html页面上的下拉菜单之前，我尝试添加以下内容，但这没有帮助。

<style>ng-multiselect-dropdown >.dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
         padding: 16px 10px;
         cursor: pointer;
         text-align: left;
 }

有人可以帮我吗？

Answer 1

尝试在组件的css文件中添加以下代码

::ng-deep .multiselect-dropdown .dropdown-btn{
    // add your own styles here. 
    // eg. min-height:5px;
}

Answer 2

您应该可以通过应用 ngClass 或 ngStyle 完成此操作。 查看ngClass Documentation

Answer 3

您是否尝试过使用“ style.css”文件中的样式代码来关闭样式代码中的“>”选择器？

我试图寻找一个'ng-multiselect-dropdown'here的演示示例，我注意到在'ng-multiselect-dropdown'和'.dropdown-list之间还有另一个元素'，以蓝色突出显示。

如果代码中也包含此类元素，则应按以下方式更改样式代码：

ng-multiselect-dropdown .dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
     padding: 16px 10px;
     cursor: pointer;
     text-align: left;
}

或者：

ng-multiselect-dropdown .multiselect-dropdown > .dropdown-list[_ngcontent-c6] li[_ngcontent-c6] {
         padding: 16px 10px;
         cursor: pointer;
         text-align: left;
    }

因为如果使用选择器'>'，则规则将仅应用于类'.dropdown-list'紧接在'ng-multiselect-dropdown'元素之后的元素。
建议：
我建议您避免在样式规则（“ _ngcontent-c6”）中使用自动生成的角度代码。您的代码将更加清晰和可重用。

让我知道这是否是解决方案。

Answer 4

您必须在全局CSS文件中应用样式，例如site.css而不是组件css文件中。这是site.css中的示例：

  .multiselect-dropdown[_ngcontent-c3] .dropdown-btn[_ngcontent-c3] .selected-item[_ngcontent-c3] {
    margin-right: 4px;
    background: #fb4f4f !important;
    padding: 0 5px;
    color: #fff;
    border-radius: 2px;
    float: left;
}

Answer 5

虽然我已经很晚了，但对于那些仍在寻找解决方案的人来说仍然可以提供帮助 我只是在组件中添加了自定义类，并使用了角形

/deep/ 

属性（尽管不建议使用，但您可以引用其他任何替代方法，例如：ng-host）

例如：

 <ng-multiselect-dropdown class="custom-asset-dropdown"
                    [placeholder]="'Select Asset'"
                    [data]="compareAssetGroup"
                    [(ngModel)]="selectedAssetGroup"
                    [settings]="multiSelectAssetSettings"
                    (onSelect)="onItemSelect($event)"
                    (onSelectAll)="onSelectAll($event)"
                  >
 </ng-multiselect-dropdown>

您的CSS可以是：

/deep/ .custom-asset-dropdown{
/* hello make my css looks cool instead of default css*/
}

Answer 6

我是Angular的初学者，我今天开始。今天正在测试。我所做的是：

<ng-multiselect-dropdown
    [class]="'my-class'"

并在“我的班级”中定义您的风格

Answer 7

我也面临着同样的问题。我通过在全球范围内应用样式解决了该问题。这意味着在style.css中，而不是在您正在处理的任何组件CSS文件中。

因此转到角度的Style.css并添加所需的CSS属性，然后为class =“ container” 在Style.css中包含以下代码 例如：

.container .multiselect-dropdown .dropdown-btn {
width: 200px!important; //include your code }

，并在您使用ng-multiselect下拉菜单的component.html文件中，包括此

 <ng-multiselect-dropdown

class="container"  //include this
[placeholder]="'Environment'"
[data]="envData"
[settings]="dropdownSettings"
(onSelect)="onEnvSelect($event)"


>