使用 :host ::ng-deep 设置 CSS 角色到角度组件 CSS 不起作用？

Question

尝试使用以下方法设置角度组件的 CSS prop：

:host ::ng-deep .p-dropdown-panel {
  transform-origin: center bottom !important;
  top: -119px !important;
  left: 0 !important;
}

不起作用，但是当我从上面的代码中删除 :host 和 ::ng-deep 时，它工作得很好 但问题是这样做意味着这个 CSS 规则也开始泄漏到其他组件中。我再次浏览了文档，但无法找到可能发生这种情况的原因。

Answer 1

这应该将样式隔离到parent-element-className css类：

.parent-element-className {
  ::ng-deep .p-dropdown-panel {
    transform-origin: center bottom !important;
    top: -119px !important;
    left: 0 !important;
  }

}

Answer 2

使用 ::ng-deep 自定义 Angular 材质类

---

关键词

Angular Material

::ng-deepCSSView EncapsulationDeprecated

---

介绍::ng-deep

Angular Material 提供了一组广泛用于 Angular 应用程序中的 UI 组件。要自定义这些组件，开发人员可能需要覆盖默认样式。

• ::ng-deep的使用：::ng-deep

  伪类选择器允许开发人员将样式应用到子组件，而不受 Angular 视图封装的限制。

• 已弃用的功能：尽管它很有用，但::ng-deep

  已被弃用，应谨慎使用。 Angular 建议使用替代的样式方法。

---

使用示例::ng-deep

以下是如何使用

::ng-deep

 将自定义样式应用到 Angular Material 组件：

• 自定义按钮:

  目标：
  • .mat-button
  自定义样式：背景颜色设置为绿色阴影 (
  • #4CAF50

    )，文本颜色设置为白色。

• 自定义卡片:

  目标：
  • .mat-card
  自定义样式：浅灰色的盒子阴影（
  • #888888

    ）。

数字

自定义样式应用：

graph TB;
    A["::ng-deep Selector"] --> B["Angular Material Components"]
    B --> C[".mat-button"]
    B --> D[".mat-card"]
    C --> E["Custom Background & Text Color"]
    D --> F["Custom Box Shadow"]

图片

::ng-deep 的替代品

• 组件特定样式：在组件的 CSS 文件中定义样式，而不使用 ::ng-deep

  。

• 视图封装：利用 Angular 的视图封装功能来控制样式如何应用于组件。

请记住，虽然

::ng-deep

 可以快速修复，但重要的是通过采用推荐的样式实践来计划删除它。

来源

角度材质文档
组件样式的 Angular 指南