如何重写PrimeNG TabMenu激活状态菜单项的边框颜色样式

问题原因 #

你看到的蓝色边框不是元素的border属性，是主题为可交互元素设置的聚焦状态样式，大概率是outline或者box-shadow属性，仅在元素被点击触发focus状态时生效。你之前排查时没有在开发者工具中启用伪类状态预览，所以找不到对应样式规则。

解决方法 #

添加以下CSS规则即可移除该边框：

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus,
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

如果你的项目需要兼容键盘导航可访问性，可以仅移除鼠标点击时的聚焦样式，保留键盘Tab切换时的轮廓：

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

排查技巧 #

后续遇到仅交互时出现的样式问题，可在Chrome开发者工具的样式面板中，点击「:hov」按钮，勾选对应的伪类状态（比如:focus、:active）即可锁定对应样式规则。

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