Angular 8+PrimeNG Babylon主题：p-tree-component蓝色边框自定义求助

我之前也碰到过PrimeNG主题自带的这种显眼焦点边框问题，尤其是Babylon主题的样式确实有时候会有点突兀。这个蓝色边框基本是组件的焦点状态样式，用来支持无障碍导航，但确实可能不符合你的视觉需求，给你几个靠谱的自定义方案：

1. 先精准定位边框来源（关键第一步） #

先用浏览器开发者工具（F12）选中出现蓝色边框的tree节点，在「Styles」面板里找带:focus或:focus-visible的样式规则，看看是.p-tree-node还是.p-tree-node-content这类选择器控制的——不同PrimeNG版本可能略有差异，确认后再写CSS会更精准。

2. 全局样式覆盖（全项目生效） #

如果希望整个项目的p-tree都去掉/修改这个边框，在你的全局styles.scss（或styles.css）里添加：

/* 移除节点的焦点边框 */
.p-tree .p-tree-node:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 如果是节点内容区域的焦点样式，补充这个 */
.p-tree .p-tree-node .p-tree-node-content:focus {
  outline: none !important;
  box-shadow: none !important;
}

3. 组件内局部覆盖（仅当前组件生效） #

如果只想在某个使用p-tree的组件里修改，利用Angular的::ng-deep突破样式隔离（虽然官方提示可能废弃，但在Angular 8里依然稳定可用）：

:host ::ng-deep .p-tree .p-tree-node:focus {
  /* 改成你想要的柔和样式，比如浅灰色细边框 */
  outline: 1px solid #ddd !important;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

/* 完全移除的写法 */
:host ::ng-deep .p-tree .p-tree-node-content:focus {
  outline: none !important;
  box-shadow: none !important;
}

4. 无障碍友好的替代方案 #

注意：这个蓝色边框是无障碍焦点样式，帮助键盘导航的用户识别当前聚焦位置。如果完全移除，建议替换成更柔和但依然可见的样式，兼顾无障碍体验：

:host ::ng-deep .p-tree .p-tree-node:focus {
  outline: 2px solid #f0f0f0;
  outline-offset: 1px;
}

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