4

我正在使用 ngPrime 组件，如果我为它们设置样式，则样式不会应用于dashboard.component.sass 文件，但是当我使用全局 style.sass 文件时它们会应用。

仪表板.component.html 文件

<p-dropdown [options]="reports" styleClass="report-dropdown">
      <ng-template let-item pTemplate="selectedItem">
        <i class="fas fa-th" style="fill: white;"></i>
        <span style="vertical-align:middle">
          {{item.label}}</span>
      </ng-template>
    </p-dropdown>

dashboard.component.scss 和全局 style.scss 文件

.report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}
4

2 回答 2

6

如果要在组件中设置样式，只需ng-deep在要应用的规则之前使用。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

它确实已被弃用，但目前还没有替代品，所以你现在不妨使用它

仪表板.component.scss

::ng-deep .report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}

我不知道primeng，但我分叉了一个显示颜色变化的旧stackblitz（尽管示例中没有打开下拉菜单）

https://stackblitz.com/edit/primeng-bootstrap-ylpzwd?file=app/app.component.scss

其他解决方案

另一种解决方案是在全局样式表中设置样式。如果您的 CSS 规则比 ngPrime 默认应用的规则更具体，这将起作用

于 2018-03-28T07:56:32.490 回答
-1

默认情况下，Angular 组件样式的作用域是影响组件的视图。这意味着您编写的样式将影响组件模板中的所有元素。它们不会影响模板中其他组件的子元素。您可以在Angular 文档中阅读有关视图封装的更多信息。

如果您的组件启用了视图封装（默认），您的组件样式只会影响模板中的顶级子项。除非您执行以下操作之一，否则您的组件样式不能将属于子组件的 HTML 元素作为目标：

  • （正如您已经提到的）将覆盖样式添加到您的全局样式表中。范围选择器，使其仅影响您需要的特定元素。
  • 关闭组件上的视图封装。如果您这样做，请确保适当地确定您的样式范围，否则您可能最终会偶然地针对应用程序中其他地方的其他组件。
  • （不建议）使用已弃用的穿透阴影的后代组合器来强制将样式应用于所有子元素。在Angular 文档中阅读有关此已弃用解决方案的更多信息。
于 2021-01-09T16:40:52.823 回答