css - 如何设置 PrimeNg 下拉图标的样式

Question

我正在尝试设置 PrimeNg 下拉图标的样式。

https://www.primefaces.org/primeng/#/dropdown

这是它目前的样子以及我正在努力让它看起来像什么。

我想我必须设计

ui-dropdown-trigger

但我不确定将其设置为什么。

我尝试了背景色，但没有用。

我尝试的另一件事是将其设置为如下属性:

<p-dropdown ... [styleClass]="{background-color:black}" ...></p-dropdown>

有什么想法吗？

编辑:

这就是我获得所需输出的方式:

1. 关闭封装(reference)

2. 在 css 中添加了以下代码:

   正文 .ui-dropdown .ui-dropdown-trigger {背景色:#2399E5；白颜色;

Answer 1

要更改 dropdownicon 属性本身，您需要做两件事:

1)您需要在 component.ts 中创建一个 var，您将在其中放置所需图标的字符串。但是您必须在字符串的开头添加“fa fa-fw”。例如，如果你想放一个'fa-star'，那么完整的字符串就是'fa fa-fw fa-star'

export class AppComponent {
  star = 'fa fa-fw fa-star';
  constructor(){}
}

2)在component.html中，你必须添加[dropdownIcon]=var

<p-dropdown[dropdownIcon]="star" placeholder="Search (Jobs)"></p-dropdown>

结果看起来像 /image/WZDVx.png