如果组件被破坏，如何删除特定的 scss？答案

【问题标题】：How to remove the particular scss if the component get destroyed?如果组件被破坏，如何删除特定的 scss？
【发布时间】：2026-02-07 09:05:01
【问题描述】：

我在我的项目中使用 PrimeNG 我仅将 p-dropdown 和 appendTo 正文用于特定组件文件，并且我仅在一个文件中更改了 css，例如

geneFinder.component.scss

.ui-dropdown-panel {
  z-index: 999 !important;
}

组件文件是

 <p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body"></p-dropdown>

但是这个 css 也会影响所有其他文件。如果我删除了!important，它不会影响其他页面，并且这不适用于特定组件本身。如何解决这个问题？

【问题讨论】：

标签： css angular sass primeng

【解决方案1】：

你可以试试这个

 <p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" [style]={'z-index':'999 !important'}></p-dropdown>

【讨论】：

我也尝试过这个解决方案，但这不起作用，因为附加到正文的 ui-dropdown-panel 没有使用特定的 div
我已经更新了。你可以看到primefaces.org/primeng/#/dropdown自定义内容可能会有所帮助

【解决方案2】：

您还可以使用 p-dropdown 属性 baseZIndex 自定义 z-index。这样就不用在css中设置了，只影响设置属性的下拉菜单。

【讨论】：

【解决方案3】：

Angular 是一个单页应用程序框架，因此所有的 CSS 都将被组合起来，并且 CSS 样式将在单个 html 页面的 style 标签内创建。如果我们有一个名称与其他组件元素相同的 CSS 类，它确实会影响它。

如果是特定于组件的 CSS，请创建一个自定义类名称，例如，

.mycomponent-ui-dropdown-panel {
  z-index: 999 !important;
}

并将该类添加到我们需要应用此更改的组件的 html 元素中。这将确保其他组件的其他元素不受 CSS 样式的影响。

【讨论】：

我尝试了这个解决方案，但这不起作用，因为附加到正文的 ui-dropdown-panel 没有使用特定组件。

【解决方案4】：

我通过在我的组件中添加 panelStyleClass 解决了这个问题，

<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" panelStyleClass="overlay-zindex"></p-dropdown>

.overlay-zindex{
   z-index: 999 !important;
}

【讨论】：