更改 ng-multiselect-dropdown 的 css答案

【问题标题】：changing css of ng-multiselect-dropdown更改 ng-multiselect-dropdown 的 css
【发布时间】：2018-10-29 12:53:06
【问题描述】：

我想更改 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;
 }

有人可以帮帮我吗？

【问题讨论】：

您是否尝试将您的样式放入 style.css 文件中？你能看到元素上应用的 css 吗？也许它只是被另一个规则覆盖了？
是的，我尝试将代码放入 style.css 文件中。无法看到元素的变化。

标签： angular

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我也遇到了同样的问题。我通过全局应用样式解决了这个问题。这意味着在 style.css 中，而不是在您正在处理的任何组件 CSS 文件中。

所以转到 Angular 的 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)"


>

【讨论】：

【解决方案3】：

您应该可以通过应用 ngClass 或 ngStyle 来完成这项工作。查看ngClass Documentation

【讨论】：

【解决方案4】：

您是否尝试过使用“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'）中使用角度自动生成的代码。您的代码会更加清晰和可重用。

如果这是解决方案，请告诉我。

【讨论】：

【解决方案5】：

您必须在全局 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;
}

【讨论】：

【解决方案6】：

虽然我很晚了，但它仍然可以帮助那些仍在寻找解决方案的人我只是在组件中添加了自定义类并使用了角度

/deep/

property（虽然不推荐使用，但您可以参考任何其他替代方案，例如 :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*/
}

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

使用任何开发人员工具 (chrome) 并检查您想要进行的更改。请注意这些类，为了访问这些类，请使用以下语法：

::ng-deep '你要访问的类名'{更改}

::ng-deep .multiselect-dropdown .dropdown-btn{ 
      display: none;
 }

【讨论】：