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

Question

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

geneFinder.component.scss

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

组件文件是

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

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

Answer 1

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

如果组件特定 CSS，请创建一个自定义 class 名称，例如

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

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

Answer 2

你可以试试这个

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

Answer 3

您还可以使用 p-dropdown 属性 baseZIndex 自定义 z-index。这样，你就不需要在css中设置它，它只影响设置属性的下拉列表。

Answer 4

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

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

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

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

How to remove the particular scss if the component get destroyed?

css

sass

primeng

angular