更改 primeNG p-panel 的图标样式答案

【问题标题】：Changing icon style for primeNG p-panel更改 primeNG p-panel 的图标样式
【发布时间】：2022-01-26 17:19:16
【问题描述】：

我创建了一个可切换的 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 sn-p:

<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 是一个布尔值，用于从其他位置打开和关闭面板。

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

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

【问题讨论】：

您能否添加 html sn-p 以及您的预期输出？
添加了，希望清楚。 @MirentafazAli

标签： css angular panel primeng

【解决方案1】：

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

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

添加正在工作的 stackblitz link

【讨论】：