覆盖PrimeNG组件CSS

Question

我正在使用 PrimeNG OverlayPanel 在下拉单击中显示，但我在将默认左箭头移动到右侧位置时遇到问题。我尝试了我脑子里想到的一切，但我没有主意。

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

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

下拉箭头图像

Answer 1

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

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%为例。

堆栈闪电战

Answer 2

将此添加到 style.css：

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

现在箭头位于与初始位置相反的右侧。

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

Answer 3

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

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

Answer 4

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

Answer 5

对于 p-覆盖面板
:before 和 :after 是你应该捕获它才能工作的属性

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

  body .p-overlaypanel:after {

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

Answer 6

您可以在全局样式表中覆盖它，即

style.scss

通过使用自定义类包装元素。这将提供更多特异性。

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

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

Answer 7

:host{ 
::ng-deep .p-element{
    .p-editor-container {
        .p-editor-toolbar.ql-snow{
            background-color: #fff;
        }
    }
}}

这肯定会起作用。