如何移除PrimeReact OverlayPanel组件的箭头？

本问题涉及PrimeReact中的OverlayPanel组件，我希望移除叠加面板与其附加元素之间的小箭头（如上图所示）。

解决方法 #

直接通过CSS隐藏箭头对应的元素即可，PrimeReact的OverlayPanel箭头使用的类是p-overlaypanel-arrow，添加以下样式：

.p-overlaypanel-arrow {
    display: none !important;
}

如果你的项目有样式作用域（比如用了CSS Modules），可以给目标OverlayPanel加个自定义类名，比如给组件设置className="no-arrow-overlay"，再写针对性样式：

.no-arrow-overlay .p-overlaypanel-arrow {
    display: none;
}

这样就能彻底移除面板上的箭头了。

内容的提问来源于stack exchange，提问作者sookie