Override PrimeNG component CSS

Your goal is override deeply incapsulated CSS. One of the possible sollution is to add an id to overlay-panel and then ovverride the desired element(in our case this is before and after pseudo-elements of a div with the 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%;
    }

left: 80% is for example.

stackblitz

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

is the place but the question is; how you wish to handle button positioning on page. If button near left,right,bottom border then you should handle arrow position. by this variable.

Convert your entire Angular project to Scss. The reason is that View styles do not go deep. Scss in root does go deep and is worth it long term to stop using just CSS in Angular projects. I wrote an article on this.

Add this to style.css:

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

Now the arrow is on the right side opposite of initial.

Additional info: avoid using :host ::ng-deep as it is deprecated.. use the style.css file instead!

For p-overlaypanel
:before and :after are the attributes you should catch for this to work

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

  body .p-overlaypanel:after {

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

You can override it in global stylesheet ie style.scss by wrapping the elements with a custom class. This will provide more specificity.

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

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