在 PrimeNG 中自定义按钮样式

Question

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

我试过将按钮的 css 属性设置为 none 但它不起作用。还尝试设置图像的样式，但 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;
}

Answer 1

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

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

请注意，以这种方式，这些样式将成为全局样式，并且将影响整个应用程序，如果您想在特定页面上执行此操作，只需添加一些父级 class 并在其中应用样式class

Answer 2

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

<p-pickList styleClass="myPickList">

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

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

Stackblitz

在 PrimeNG 中自定义按钮样式

Customizing styles of button in PrimeNG

html

css

primeng

angular