在 PrimeNG 中自定义按钮样式答案

【问题标题】：Customizing styles of button in PrimeNG在 PrimeNG 中自定义按钮样式
【发布时间】：2019-10-15 15:09:18
【问题描述】：

如何自定义 PrimeNG 选项列表中按钮的样式并禁用我不需要的按钮？

我尝试将按钮的 css 属性设置为 none，但它不起作用。还尝试设置图像的样式，但它们都不起作用

HTML 代码：

<p-pickList [source]="availableCategories" [target]="selectedCategories" sourceHeader="Available Categories" targetHeader="Selected Categories" dragdrop="true" [responsive]="true"
  [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" >
    <ng-template let-list pTemplate="item">
        <div class="ui-helper-clearfix">
            <div class="items">{{list.categoryDescription}}</div>
        </div>
    </ng-template>
</p-pickList>

CSS

.ui-picklist-buttons {
   display: none;
}
.ui-picklist-filter-icon {
    left: 0em;
}

【问题讨论】：

标签： html css angular primeng

【解决方案1】：

将您的样式添加到全局样式中，即style.css 或将::ng-deep 添加到您的样式中，例如

::ng-deep .ui-picklist-buttons {
   display: none;
}
::ng-deep .ui-picklist-filter-icon {
    left: 0em;
}

请注意，如果您只想在特定页面上执行此操作，然后添加一些父类并在该类中应用样式，这些样式将成为全局样式并在整个应用程序中生效

【讨论】：

【解决方案2】：

您应该将styleClass 属性添加到您的<p-picklist> 元素中

<p-pickList styleClass="myPickList">

然后在您的组件 CSS 中，您可以应用以下样式：

::ng-deep .myPickList .ui-picklist-buttons {
  display: none;
}

Stackblitz

【讨论】：

::ng-deep 正在被弃用，我们可以为此提供新的解决方案吗？