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

Question

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

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

我猜我必须设置

的样式

ui-dropdown-trigger

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

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

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

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

有什么想法吗？

编辑:

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

Answer 1

我使用来自 primeng 的 bootstrap 主题。所以我必须适应：

body .ui-dropdown .ui-dropdown-trigger {
    background-color: blue;
}

在 CSS 中为主题中的触发器着色。

Answer 2

要更改下拉图标属性本身，您需要做两件事：

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>

结果看起来像 https://i.stack.imgur.com/WZDVx.png

Answer 3

您可以使用以下方法将其设置为属性：

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

或者您可以设置 ui-dropdown-trigger 的样式，但是，您必须使用全局样式 sheet，而不是组件的样式。

要在组件的 css 文件中设置 ui-dropdown-trigger 样式，您必须使用

:host >>> .ui-dropdown-trigger {...}

但是，这已被弃用。

How to style the PrimeNg dropdown icon