覆盖 PrimeNG 组件 CSS

Question

我正在使用 PrimeNG OverlayPanel 在下拉单击中显示，但我无法将默认的左箭头移动到右位置。我想尽一切办法，但我没有想法。

你能给我一些解决这个问题的新想法吗？

代码示例：https://stackblitz.com/edit/primeng-overlaypanel-demo

dropdown arrow image

Answer 1

.mybutton .p-overlaypanel:after, .mybutton .p-overlaypanel:before {
    bottom: 100%;
    content: " ";
    height: 0;
    right: 1.25rem; //<---
    pointer-events: none;
    position: absolute;
    width: 0;
}

是地方，但问题是；您希望如何处理页面上的按钮定位。如果按钮靠近左、右、底部边框，那么您应该处理箭头位置。通过这个变量。

Answer 2

您的目标是覆盖深度封装 CSS。一种可能的解决方案是向 overlay-panel 添加一个 id，然后覆盖所需的元素（在我们的例子中，这是 div 的 pseudo-elements 之前和之后 p-overlay class

html:

<p-overlayPanel #op [showCloseIcon]="true" id='hello'[style]="{width: '450px'}">

css:

:host ::ng-deep #hello .p-overlaypanel::before,
    :host ::ng-deep #hello .p-overlaypanel::after
    {
      left: 80%;
    }

左：80%是例子。

stackblitz

Answer 3

将整个 Angular 项目转换为 Scss。原因是视图样式不深入。 root 中的 Scss 确实很深入，从长远来看，停止在 Angular 项目中仅使用 CSS 是值得的。我写了一篇关于这个的文章。

Answer 4

将此添加到 style.css：

.p-overlaypanel:after, .p-overlaypanel:before{
  left: unset !important;
  right: 1.25rem !important;
  }

现在箭头在initial对面的右边。

其他信息：避免使用 :host ::ng-deep，因为它已被弃用。请改用 style.css 文件！

Answer 5

对于p-overlaypanel
:before 和 :after 是你应该抓住的属性

 body .p-overlaypanel:before {
    left: calc(100% - 17px);
  }

  body .p-overlaypanel:after {

    left: calc(100% - 17px);
  }

覆盖 PrimeNG 组件 CSS

Override PrimeNG component CSS

html

css

primeng

angular