How to remove arrow from PrimeReact OverlayPanel?

Question

This question relates to the OverlayPanel component in PrimeReact.

I'm looking to remove the small arrow between the overlay panel and its appending element (as can be seen in the image above).

Answer 1

This can be achieved by setting the content style to none as follows:

p-overlaypanel {
    &:before {
        content:none;
    }

    &:after {
        content:none;
    }

    margin-top: 0px; # removes the gap between menu and anchor element after arrow-removal
}