无法覆盖angular 6中ng-multiselect-dropdown中的默认css样式

umuewwlo  于 2023-07-01  发布在  Angular
关注(0)|答案(4)|浏览(109)

我正在使用ng-multiselect-dropdown。我想更改默认样式,但它无法覆盖。我试图在index.html,angular.json,style.css文件中提供样式,并且我还尝试了内联样式,但没有任何变化。
Css尝试了:

ng-multiselect-dropdown .multiselect-dropdown > .dropdown-btn{
font-size:12px;
}

ts:

styles: [".multiselect-dropdown .dropdown-btn{
        font-size:12px;
        }"]

另一种方式:

multiselect-dropdown .dropdown-btn{
    font-size:12px;
    }

另一种方式:

multiselect-parent .dropdown-btn{
    font-size:12px;
    }

联系我们

<ng-multiselect-dropdown  [placeholder]="'Select'" [data]="xxx" [(ngModel)]="xxx" name="Name" [settings]="dropdownSettings" [textField]="'Name'">
 </ng-multiselect-dropdown>

如何做到这一点?我试了所有与这个问题相关的东西。所以请不要说重复的问题。

mi7gmzs6

mi7gmzs61#

请像这样使用css来覆盖默认值

ng-multiselect-dropdown /deep/ .multiselect-dropdown > .dropdown-btn{
   font-size:12px !important;
}

备选

:host /deep/ .multiselect-dropdown .dropdown-btn {
   font-size:12px !important;
}

添加到全局样式src/styles.css

.custom-font-size .multiselect-dropdown .dropdown-btn {
   font-size:12px !important;
}

然后将这个类custom-font-size添加到下拉组件

<ng-multiselect-dropdown class="custom-font-size"></ng-multiselect-dropdown>
yquaqz18

yquaqz182#

首先,你必须确保这个组件被添加到你的组件内部,因为一些组件被添加到body中。
如果此组件已添加到您的组件中,您可以在组件css文件中使用以下css:

:host::ng-deep ng-multiselect-dropdown .multiselect-dropdown > .dropdown-btn{
     font-size:12px;
}

如果这已经被添加到body中,唯一的方法是把你的css放在styles.css文件中。

ng-multiselect-dropdown .multiselect-dropdown > .dropdown-btn{
     font-size:12px;
}
v1uwarro

v1uwarro3#

您可以尝试在使用ng-multiselect-dropdown的组件装饰器中添加encapsulation: ViewEncapsulation.None
Angular内置了视图封装,这使我们能够使用Shadow DOM甚至模拟它。有三种视图封装类型:

  • ViewEncapsulation.None -完全没有Shadow DOM。因此,也没有样式封装。
  • 模拟-没有影子DOM,但样式封装模拟。
  • 本机-本机阴影DOM与所有它的好处。

例如-:-

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  encapsulation: ViewEncapsulation.None
})
gstyhher

gstyhher4#

这肯定会对你有帮助
覆盖选定项

:host ::ng-deep {
   .multiselect-dropdown {
    .dropdown-btn{
     .selected-item{
       background: #00b8aa !important;
       border: #00b8aa !important;
     }
    }
  }
}

覆盖复选框

:host::ng-deep ng-multiselect-dropdown .multiselect-item-checkbox 
  input[type=checkbox]:checked + div:before {
  background:#00b8aa !important;
}

:host::ng-deep ng-multiselect-dropdown .multiselect-item-checkbox 
    input[type=checkbox] + div:before {
    border: 2px solid #00b8aa !important;
}

相关问题