更改 primeNG p-panel 的图标样式

Question

我创建了一个可切换的 p 面板。像往常一样，它有一个用于展开或折叠它的按钮，但是这个图标在我单击它时被选中时充当按钮的方式。

我已为 css 中的按钮禁用此属性:

 button:focus {
    outline: none;
   box-shadow: none;
 }

我也想为面板的图标禁用此属性，但我不知道该怎么做。我已经阅读了一些关于 ng-deep 的内容，所以我想我必须做一些类似

的事情

::ng-deep .p-panel .p-panel-titlebar-toggler {
  outline: none;
   box-shadow: none;
}

那当然不行。我不知道更多，欢迎任何帮助。

编辑：添加 html 片段：

<p-panel [toggleable]="true" [toggler]="'header'" [(collapsed)]="panelFuncionalidades" >
            <ng-template pTemplate="header">
                Panel de funcionalidades
            </ng-template>
            Here are some buttons and stuff that go inside the panel


    </p-panel>

变量 PanelFuncionalidades 是一个布尔值，以便从其他地方打开和关闭面板。

关于所需的输出，我只想删除出现在“展开”或“折叠”按钮周围的圆圈，点击时出现，如图所示

当你在它外面点击时，这个圆圈会消失，但我想避免它出现。

Answer 1

在您的 styles.css 文件中添加 CSS

.p-panel .p-panel-header .p-panel-header-icon:focus {
  box-shadow: none !important;
}

添加工作 stackblitz link

更改 primeNG p-panel 的图标样式

Changing icon style for primeNG p-panel

css

angular

panel

primeng